Float fluid text div inline with image div - html

Question

I cannot figure out how to left float a div (filled with text and other divs) inline with an image with a fixed width. I have tried a host of options but I cannot get the second div to float inline.
How do I get the 'sidebbar-post-col2' to float inline with the 'featured-media' image div?
Thanks in advance
http://codepen.io/coreysimons/pen/waQEBE
CODE
.post-container {
width:40%;
display:inline-block;
height:auto;
overflow:hidden;
}
.post {
height:auto;
}
.sidebar-posts .featured-media {
width:auto;
display:block;
}
.sidebar-posts .featured-media img {
max-width: 90px;
max-height: 90px;
margin-right:20px;
overflow: hidden;
}
.sidebbar-post-col2 {
float:left;
width:auto;
display:inline-block;
}
.entry_author_image {
display: inline-block;
}
.author-meta {
font-size: 12px;
letter-spacing: .5px;
font-weight: normal;
margin: 0px;
display: inline-block;
padding: 0px;
float: none;
color: #333;
vertical-align: top;
text-decoration: underline;
}
.author_location {
padding: 0px;
text-transform: none;
font-size: 12px;
color: #999;
font-weight: normal;
letter-spacing: .5px;
display: inline-block;
float: none;
vertical-align: top;
text-decoration: none;
}
.sidebar-posts .post-header h2.post-title {
text-align: left;
font-family: 'Roboto';
font-weight: 900;
font-size: 1.1em;
line-height: 25px;
letter-spacing: 0;
padding-bottom: 10px;
}
.sidebar-posts .category-meta {
text-align:left;
color:#000;
margin-bottom: 5px;
margin-top:0px;
}
.sidebar-posts .post-submeta {
text-align: left;
float: none;
margin-bottom: 24px;
margin-left: 0;
border-bottom: 1px solid #aaa;
padding-bottom: 24px;
}
.sidebar-posts .post-header {
vertical-align: top;
padding:0;
}
<div class="post-container sidebar-posts">
<div class="post">
<div class="featured-media">
<a href="#" rel="bookmark" title="Crazy new GIF lookbook from Kenzo lookbook from Kenzo">
<img width="433" height="558" src="http://coreysimons.com/placeholder/placeholder-img-1.png" class="attachment-post-thumbnail wp-post-image" alt="Screen Shot 2015-07-28 at 22.45.13" /></a>
</div> <!-- /featured-media -->
<div class="sidebbar-post-col2">
<div class="post-header">
<div class="category-meta">Feature, sidebar</div>
<h2 class="post-title">Crazy new GIF lookbook from Kenzo lookbook from Kenzo</h2>
</div><!-- /post-header -->
<div class="post-submeta">
<div class="entry_author_image"><img src="http://coreysimons.com/placeholder/profile-image.png" alt="Corey Simons" width="16" height="16" /></div>
<div class="author-meta">Corey Simons</div>
<div class="author_location">Los Angeles</div>
</div><!-- /post-submeta -->
</div><!-- /sidebar-post-col2 -->
<div class="clear"></div>
<div class="spacer" style="clear: both;"></div>
</div><!-- /post -->
<div class="post">
<div class="featured-media">
<a href="#" rel="bookmark" title="Crazy new GIF lookbook from Kenzo lookbook from Kenzo">
<img width="433" height="558" src="http://coreysimons.com/placeholder/placeholder-img-1.png" class="attachment-post-thumbnail wp-post-image" alt="Screen Shot 2015-07-28 at 22.45.13" /></a>
</div> <!-- /featured-media -->
<div class="sidebbar-post-col2">
<div class="post-header">
<div class="category-meta">Feature, sidebar</div>
<h2 class="post-title">Crazy new GIF lookbook from Kenzo lookbook from Kenzo</h2>
</div><!-- /post-header -->
<div class="post-submeta">
<div class="entry_author_image"><img src="http://coreysimons.com/placeholder/profile-image.png" alt="Corey Simons" width="16" height="16" /></div>
<div class="author-meta">Corey Simons</div>
<div class="author_location">Los Angeles</div>
</div><!-- /post-submeta -->
</div><!-- /sidebar-post-col2 -->
<div class="clear"></div>
<div class="spacer" style="clear: both;"></div>
</div><!-- /post -->
</div><!-- /post-container -->

Answer 1

Ok so you have to do a few things:
1) On .sidebbar-post-col2 take off the float. You also need to add a pixel or percentage width to this div. That must be specified in order for inline-block to work I did 50%for my example.
2) Then on .sidebar-posts .featured-media I added a vertical-align: top; as well as changed display:block to display:inline-block
EDIT:
See my latest JSfiddle here:
https://jsfiddle.net/d239roug/2/
Essentially what I did was:
1) .post class I added display:table
2) On .sidebar-posts .featured-media and .sidebbar-post-col2 I added display:table-cell
The explanation for this is that display:table-cell distributes the space evenly depending on how much the inner content's width takes up within the display:table parent DIV.