Vertically align div within div, and - html

Question

I'm trying to create a div, and then inside the div put the date on the left, and two icons on the right. Both should be vertically centered, have some margin to the edge, and margin between other elements in the parent div. But right now when I run it, the icons end up in strange positions, often clipping out of the div.
.c-project-bar {
width: 355px;
height: 30px;
display: table;
padding: 0px 10px;
background-color: #ffffff;
}
.c-project-date {
display: table-cell;
vertical-align: middle;
color: #828282;
font-size: 14px
}
.c-project-github-icon {
margin-left: 10px;
background-color: #000000;
height: 25px;
width: 25px;
float: right;
vertical-align: middle;
display: table-cell;
}
<div class="c-project-bar">
<p class="c-project-date">Aug, 2017</p>
<span class="c-project-github-icon"></span>
<span class="c-project-github-icon"></span>
</div>
https://jsfiddle.net/enyzhxyz/
Edit:
Everyone's answers are awesome, it seemed a major issue was the fact that the was inheriting { margin: 0px; }, and it was throwing a wrench in everyone's solutions. I solved this by including a margin: initial, before using any margin style later, so it first removed { margin: 0px; } then added the one I wanted.

Answer 1

When you give float: right you cannot vertically centre. Instead, use the inline-block technique:
.c-project-bar {
width: 355px;
padding: 0px 10px;
background: #ccf;
}
.c-project-date, .c-project-icons {
display: inline-block;
width: 48%;
vertical-align: middle;
}
.c-project-icons {
text-align: right;
}
.c-project-github-icon {
margin-left: 10px;
background-color: #000000;
height: 25px;
width:25px;
display: inline-block;
vertical-align: middle;
}
<div class="c-project-bar">
<p class="c-project-date">Aug, 2017</p>
<div class="c-project-icons">
<span class="c-project-github-icon"></span>
<span class="c-project-github-icon"></span>
</div>
</div>
I would have suggested you the transform and position centering technique, but it would be a too much of overkill for this solution. I have given some background colour to see it is perfectly vertical align middle. Although it uses slightly extra markup, this would be the right way that works on browsers that don't support flexbox too.

Answer 2

Here is a solution using css flexbox.
body {
background-color: #696969;
}
.c-project-bar {
display:flex;
align-items: center;
justify-content: space-between;
width: 355px;
height: 30px;
padding: 0px 10px;
background-color: #ffffff;
}
.c-project-date {
color: #828282;
font-size: 14px
}
.c-project-github-icon {
margin-left: 10px;
background-color: #000000;
height: 25px;
width:25px;
float: right;
}
<div class="c-project-bar">
<p class="c-project-date">Aug, 2017</p>
<div>
<span class="c-project-github-icon"></span>
<span class="c-project-github-icon"></span>
</div>
</div>

Answer 3

Another way to achieve this could be to use transform.
position: relative;
top: 50%;
transform: translateY(-50%);
.c-project-bar {
width: 355px;
height: 30px;
padding: 0px 10px;
background-color: #ccc;
}
.c-project-date {
margin: 0;
position: relative;
top: 50%;
transform: translateY(-50%);
float: left;
color: #828282;
font-size: 14px
}
.c-project-github-icon {
margin-left: 10px;
background-color: #000000;
height: 25px;
width:25px;
float: right;
position: relative;
top: 50%;
transform: translateY(-50%);
}
<div class="c-project-bar">
<p class="c-project-date">Aug, 2017</p>
<span class="c-project-github-icon"></span>
<span class="c-project-github-icon"></span>
</div>

Answer 4

You can do it easily with display: flexbox.
.c-project-bar {
display: flex; // power
align-items: center; // aligning
width: 355px;
height: 30px;
padding: 0px 10px;
background-color: #ffffff;
}
.c-project-date {
margin-right: auto; // let's push other stuff to right side
color: #828282;
font-size: 14px
}
.c-project-github-icon {
margin-left: 10px;
background-color: #000000;
height: 25px;
width:25px;
}
Fixed jsfiddle