JSFiddle - React, Tailwind, and code Playground

by jennift

HTML

<div id="container">
    <div class="box1"><img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQbKOFIVnsGgNNJ6fwUhqbOfT0HZz6zt2AwwoeWynBHR8JHSuu7Uw" /></div>
    <div class="box2">this part is only tetxtxtxtxtxttshs s s s sjssmmskskss</div>
    <div class="box3"><img src="http://ktyreapple.typepad.com/.a/6a0133f1e8b013970b0133f1f3cbda970b-200pi" /></div>
    <span class="stretch"></span>
</div>

CSS

#container {
    width:100%;
    text-align: justify;
    -ms-text-justify: distribute-all-lines;
    text-justify: distribute-all-lines;
    background:#000; /*for illustration purposes*/
}
#container [class*="box"] {
    width: 30%; /*change this value to see the changes on fluid layout */
    vertical-align: top;
    display: inline-block;
    background:#f00; /*for illustration purposes*/
}
.stretch {
    width: 100%;
    display: inline-block;
    font-size: 0;
    line-height: 0
}
#container div > img {
    width:100%;
}