JSFiddle - React, Tailwind, and code Playground

HTML

<div id='text_area_row' style="height:200px; background:#CCC;">
    <div id='text_area_left'>Left</div>
    <div id='text_area_right'>Right</div>
    <div id='text_area_wrapper'>
        <div id='text_area'>CENTERED</div>
    </div>
</div>

CSS

#text_area_left {
    float:left;
    opacity:0.5;
    filter: alpha(opacity=50);
}

#text_area_wrapper {
    overflow:hidden;
    text-align:center;
}
#text_area {
}

#text_area_right {
    float:right;
    opacity:0.5;
    filter: alpha(opacity=50);
}