JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <div class="left">
        left stuff
        <p> some stuff, lots of stuff actually, blah blah blah</p>
        <p> more stuff</p>
        <ul>
            <li>one</li>
            <li>seven</li>
        </ul>
    </div>
    <div class="right">
        rstuff
        <p> more r stuff.... blah blah blah...</p>
        <p> Lorem Ipsum dollar sit down, amit john smith</p>
    </div>
    <img src="http://www.physics.csbsju.edu/stats/spherical_cow.gif" />
    <br style="clearfix:both;" />
</div>

CSS

div.container {
    background:#0a0;
    border-radius:15px;
    position:relative;
    width:500px;
    overflow:visible;
} 
div.container:after { 
    content:""; 
    clear:both; 
    display:block; 
    visibility:visible;
}

div.left {
    float:left;
    background:#a00;
    width: 150px;
    /* DONT WANT TO WRITE THIS */
    border-top-left-radius:15px;
    border-bottom-left-radius:15px;
    /* DIDNT ENJOY WRITING THAT */
    padding:5px;
}

div.right {
    float:left;
    background:#0a0;
} 

img {
    border-bottom: 4px solid #EEAA00;
    border-radius: 100px 100px 100px 100px;
    border-right: 7px solid #00AA00;
    border-top: 4px solid #AAEE00;
    height: 80px;
    padding: 10px;
    position: absolute;
    right: -50px;
    top: 80px;
    width: 80px;
}