I am trying to make 3 contents appear vertically center inside a div. I used `vertical-align:middle` but it does not do what i want to do. How can I fix this?

I want the `home_post_time` to appear at the right corner vertically centered.I've tried `float:right;` but could not do what i wanted. This is how i want it to appear

```
Image
Image    text                time
Image

```

```css
.home_post_sections {
  width: 100%;
  height: 33%;
  background-color: #01ff70;
  text-align: left;
}

.home_post_propic {
  width: 55px;
  height: 55px;
  margin-top: 5px;
  margin-left: 5px;
  margin-bottom: 5px;
}

.home_post_username {
  margin-left: 20px;
  width: 100%;
  vertical-align: middle;
}

.home_post_time {
  float: right;
  vertical-align: middle;
  text-align: right;
  margin-right: 10px;
}
```

```html
<div className="home_post_sections">

  <img src="http://lorempixel.com/output/people-q-c-55-55-9.jpg" className="home_post_propic" />
  <a className="home_post_username">User name</a>
  <a className="home_post_time">23h</a>

</div>
```