JSFiddle - React, Tailwind, and code Playground

HTML

<div class="mboard-block-up">
    <h2>Lorem %TitleName%</h2>    
</div>

<div class="floatedblock left">I</div>
<div class="floatedblock right">II</div>

<div class="mboard-block">
    <h2>%SubTitleName%</h2>    
    <p>Content here.. content here.. content here.. content here.. content here.. content here.. content here.</p>
</div>

<div class="floatedblock-clear"></div>

CSS

.floatedblock {
        display:inline;
    	position: relative;
        top: 50px;
        background:red;
        width:64px;
        height:64px;
        text-align: center;
        }
    .floatedblock.left{
        float:left;
        }
    .floatedblock.right{
        float:right;
        }
    .floatedblock-clear {
        clear:both;display:block;
        height:0px;font-size:0;
        overflow:hidden;
        }
.mboard-block {
    float: none;
    margin: 10px 64px;
    padding: 14px;
	background-color: #f5f5f5;
	border: 1px solid #eee;
}
.mboard-block-up{
    margin: 10px;
    padding: 20px;
	background-color: #EFEFEF;
	border: 1px solid #000;
    text-align: center;
}
.mboard-block h2{
	font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
	font-size: 14px;
	font-weight:normal;
	text-align: center;
}
.mboard-block p{
	font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
    padding: 14px;
    font-size: 13px;
}