JSFiddle - React, Tailwind, and code Playground

by chrisvenus

HTML

<div class="content">
    <div class="leftColumn">
        <div style="width: 200px; background-color: green;">a</div>
    </div>
    <div class="rightColumn">
        TestingTesting TestingTesting
    </div>
    <div class="clear">
    </div>
</div>
<br /><br />
<div class="content">
    <div class="leftColumn">
        <div style="width: 200px; background-color: green;">a</div>
    </div>
    <div class="rightColumn">
        Testing
    </div>
    <div class="clear">
    </div>
</div>

CSS

.content
{
 margin: 10px;
 padding: 0;
 border: 1px solid black;
}

.leftColumn
{
 position: relative;
 float: left;
 padding-right: 20px;
 margin-bottom: 10px;
}

.rightColumn
{
    margin-left: 200px;
  padding-right: 20px;
 margin-bottom: 10px;
    overflow-x: auto;
}
.content div:last-child
{
 margin: auto;
 padding-right: 10px;
 word-wrap: break-word;
}

.clear
{
    clear: both;
}

img 
{
    border: 1px solid green;
}