JSFiddle - React, Tailwind, and code Playground

by Peter Aad

HTML

<section class="BlogBoxes">
    <div class="inner-text">
         <h2>Hungry With no food at home</h2>

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean enim nulla, elementum bibendum lectus malesuada, sagittis maximus neque. Duis faucibus, nulla ut mollis molestie, sem est scelerisque mi, dignissim laoreet turpis risus non arcu. Suspendisse potenti. Proin non vulputate mauris. Vestibulum non nisi tempus, faucibus mi ut, eleifend dui. Sed posuere neque eros, condimentum porta nisl egestas commodo. Sed suscipit accumsan fringilla.
            <br>
            <br>Nullam condimentum urna eu lectus venenatis, non imperdiet diam sollicitudin. Aliquam leo felis, fermentum a interdum vitae, mattis at eros. Nulla ac neque malesuada, fermentum elit ac, fermentum elit. In molestie posuere ornare. Aliquam non justo sem. Aenean nisi elit, suscipit ac egestas in, dictum et augue. Nulla id elit ac ex gravida laoreet. Duis auctor dapibus lectus. Integer ut congue dolor.</p>
    </div>
    <div class="img-container">
        <img src="http://placehold.it/800x500">
    </div>
</section>

CSS

* {
    box-sizing:border-box; /*The width and height properties (and min/max properties) includes content, padding and border, but not the margin*/
}
.BlogBoxes {
    border-style: solid;
    border-width: 3px;
    width: 70%;
    padding: 10px 10px 50px 30px;
    background-color: #FFCEB7;
    margin:0;
}
.BlogBoxes:after { /*Force Element To Self-Clear its Children*/
    content:"";
    display: table;
    clear: both;
}
.BlogBoxes .inner-text {
    float:left;
    width:75%;
    font-size: 20px;
    text-align: justify;
}
.img-container {
    float: right;
    width: 25%;
    padding-left: 10px;
    padding-top: 70px;
}
.img-container img {
    max-width: 100%;
    height: auto;
    display: block;
}