JSFiddle - React, Tailwind, and code Playground

HTML

<div class="itemline">
  <span class="df">DevFest</span><span class="mn">MN</span>
</div>
<div class="itemline">
  <span class="df">DevFest</span><span class="mn2">MN</span>
</div>

<div class="itemline">
  <span class="df">DevFest</span><div class="mnbg">
  <span class="mn3"><div class="mninner">MN</div></span></div>
</div>
<br style="cleaer:both"/>
<span style="font-size:x-small">  https://developers.google.com/+/branding-guidelines#padding</span>

CSS

@import url(http://fonts.googleapis.com/css?family=Roboto:400,100);
body{
    font-family: 'Roboto', sans-serif;
    font-weight:100;
    font-size: 3em;
}
@mixin vertical-align {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.itemline{clear:both; @include vertical-align;}
.df{ color:#d34836; float: left; @include vertical-align;}
.mn{ font-weight:200; color:#000; @include vertical-align;}
.mn2{font-weight:200; color:blue; @include vertical-align;}
.mn3{ font-size:0.8em; font-weight:100; color:white;@include vertical-align;}
.mnbg{padding: 7px;
    background-color: #dd4b39;
    display: block;
    float: left;
    height: 55px;
    width: 55px;
    -webkit-border-radius: 50%;
    @include vertical-align;
}
.mninner {
    margin-left: -2px;
}