JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">

   
    <div class="left">
aaaaaaaaaaaaaaaaaaaaabbbbbbbbbbbbbbbbbbbbbbbbbbcccdcccccccccccccccccccccccccccccdccccccccddccccc
    </div>
     <div class="right">
        <div class="someIcon"></div>
    </div> 
    <div class="clear"></div>
</div>

CSS

.clear {
    clear: both;
}
.left {
display: table-cell;
    margin-right: 52px;
    border: 1px solid #FF0000;
    /* word-wrap: break-word;
    word-break: break-all;
    text-wrap: normal; 
    white-space: normal;*/
    word-break: break-all;
    
}

.container {
    display: block;
    position: relative;
    height: 100px;
}



.right {
     background: url(http://www.adiumxtras.com/images/thumbs/adiumtwit_twitters_icon_for_adium_1_31971_7892_thumb.png) center center no-repeat;
    background-size: 20px;
    display: table-cell;
    width: 50px;
    min-height: 50px;
    border: 1px solid #000000;
   
}