JSFiddle - React, Tailwind, and code Playground

by anirudhvarma

HTML

<div id="main_section" class="main_align" >
    <span class="inline">
        <span class="inline"><img src="http://placehold.it/50x50" /></span>
        &nbsp;
        <span class="small inline">A Very Small Text</span>
        &nbsp;
        <span class="medium inline">Medium String</span>
    </span>
</div>

<div class="singleLine">
    Some Text Here
</div>

CSS

.main_align {
    vertical-align: middle;
}

.inline {
    display: inline;
}

.inline img{
    vertical-align:middle
}

.block {
    display: inline;
}

.medium {
    font-size: medium
}

.small {
    font-size: x-small
}

.singleLine{
    height:50px;
    line-height:50px;
    background:#ccc; 
    margin-top:20px;
}