CSS Aligning Things Vertically and Horizontally - html

Question

See Fiddle
I have an image and two sets of text (one is a "label" and one is a "ranking").
<div class="contentsInfo">
<img src="http://lorempixel.com/90/30" />
<span>Here is some info</span>
<span>20</span>
</div>
I would like to align each to be centered vertically, the label to show up next to the image, and for the ranking data to be right aligned in the container.
However, it is not aligning in the middle, and the info and ranking "columns" are being switched (the ranking shows up in the middle, and the label to the right side).
Here is my css:
.contentsInfo
{
font-size: 0.80em;
border-bottom: 1px grey dotted;
vertical-align: middle;
display: table;
width: 100%;
}
.contentsInfo>span
{
float: right;
margin-left: 5px;
vertical-align: middle;
display: table-cell;
}
.contentsInfo span
{
font-size: 1.1em;
}
.contentsInfo img
{
height: 30px;
vertical-align: middle;
margin-right: 2px 5px 2px 0px;
padding: 2px 0px;
}

Answer 1

Wrap your contents in elements and do the following:
HTML:
<div class="contentsInfo">
<div>
<img src="http://lorempixel.com/90/30" />
<span>Here is some info</span>
</div>
<div>
<span>20</span>
</div>
</div>
CSS:
body,
html {
padding: 0px;
margin: 0px;
}
.contentsInfo {
font-size: 0.80em;
border-bottom: 1px grey dotted;
vertical-align: middle;
display: table;
width: 100%;
}
.contentsInfo>div {
margin-left: 5px;
vertical-align: middle;
display: table-cell;
}
.contentsInfo > div:first-child {
width: 100%;
}
.contentsInfo > div:last-child {
white-space: nowrap;
}
.contentsInfo span {
font-size: 1.1em;
}
.contentsInfo img {
height: 30px;
vertical-align: middle;
margin-right: 2px 5px 2px 0px;
padding: 2px 0px;
}
Working Fiddle

Answer 2

You can do like following way using display:flex. I have added on class ranking to align it right side.
*{
margin:0;
}
.contentsInfo
{
font-size: 0.80em;
border-bottom: 1px grey dotted;
display: flex;
align-items: center;
}
.contentsInfo>span
{
margin-left: 5px;
display: flex;
flex: 1 1 auto;
margin-right: 5px;
}
.ranking{
justify-content: flex-end;
}
.contentsInfo span
{
font-size: 1.1em;
}
.contentsInfo img
{
height: 30px;
padding: 2px 0px;
}
<div class="contentsInfo">
<img src="http://lorempixel.com/90/30" />
<span>Here is some info</span>
<span class="ranking">20</span>
</div>
Fiddle