JSFiddle - React, Tailwind, and code Playground

by BurpmanJunior

HTML

<div class="wrap">
        <div class="left">
            <p>Curabitur at lacus ac velit ornare lobortis.. Nam ipsum risus, rutrum vitae, vestibulum eu, molestie vel, lacus. Vivamus aliquet elit ac nisl. Aenean ut eros et nisl sagittis vestibulum.</p>
        </div>
    
    <div class="middle">
    
        <div>
            <p>Suspendisse faucibus, nunc et pellentesque egestas, lacus ante convallis tellus, vitae iaculis lacus elit id tortor. Vestibulum facilisis, purus nec pulvinar iaculis, ligula mi congue nunc, vitae euismod ligula urna in dolor. Nam commodo suscipit quam. Nullam accumsan lorem in dui. Nam adipiscing.</p>
            <p>Curabitur at lacus ac velit ornare lobortis.. Nam ipsum risus, rutrum vitae, vestibulum eu, molestie vel, lacus. Vivamus aliquet elit ac nisl. Aenean ut eros et nisl sagittis vestibulum.</p>
        </div>  
    </div>
        
        <div class="right">
            <p>Mauris sollicitudin fermentum libero. Nullam cursus lacinia erat. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Nullam dictum felis eu pede mollis pretium. Proin faucibus arcu quis ante.</p>
        </div>
    
    <div class="clear"></div>
</div>

CSS

.wrap{
    width: 100%;
    max-width: 500px;
}
.clear{
    clear: both;
}

.left{
    width: 90px;
    float: left;
}
.middle{
    width: 100%;
    float: left;
    box-sizing: border-box;
    padding-left: 100px;
    padding-right: 120px;
    margin: 0 -110px 0 -90px;
    word-wrap: break-word;
}
.right{
    width: 110px;
    float: left;
}