JSFiddle - React, Tailwind, and code Playground

by Guillermo Ignacio Enriquez Gutierrez

HTML

<br/>
<br/>
example 1:
<div class='justified'>
    <div>
        <button>button1</button>
    </div>
    <div>
        <button>button2</button>
    </div>
    <span class='stretch'></span>
</div>
example 2:
<div class='justified'>
    <div class='spacer'></div>
    <div>
        <button>button1</button>
    </div>
    <span class='stretch'></span>
</div>

CSS

/* Based on: */
/* http://stackoverflow.com/questions/6865194/ */
/* http://jsfiddle.net/thirtydot/EDp8R/ */
div.justified {
    text-align: justify;
    -ms-text-justify: distribute-all-lines;
    text-justify: distribute-all-lines;
    border: thin solid purple;
    
}
div.justified > div {
    border: thin solid green;
    display: inline-block;
    *display: inline;
    zoom: 1;
}
div.justified div.spacer {
    width: 1px;
    display: inline-block;
}
div.justified > span.stretch {
    width: 100%;
    display: inline-block;
    font-size: 0;
    line-height: 0;
}