JSFiddle - React, Tailwind, and code Playground

by muffls

HTML

<div class="menu">
    <a href="#">This</a>
</div>
<div class="content">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, </div>
<div class="clearfix"></div>

<!-- With Border -->
<div class="menu">
    <a href="#">This</a>
</div>
<div class="content content-border">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, </div>
<div class="clearfix"></div>

<!-- With Border and Border Box -->
<div class="menu">
    <a href="#">This</a>
</div>
<div class="content content-border border-box">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, </div>
<div class="clearfix"></div>

CSS

.menu, .content {
    float:left;
}

.content {
    width:72%;
}

.content-border {
    border:1px red dotted;
}

.border-box {
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
}

.menu {
    width:28%;
}

.clearfix {
    clear:both;   
    height:30px;
}