JSFiddle - React, Tailwind, and code Playground

by Lachlan Arthur

HTML

No Width:
<div class="bad">
    <p class="p1">Hello World</p>
    <p class="p2">World</p>
</div>
<br />
<div class="bad">
    <p class="p1">Hello</p>
    <p class="p2">World</p>
</div>
<br />
<div class="bad">
    <p class="p1">Hello</p>
    <p class="p2">Hello World</p>
</div>
<br />
Width Specified:
<div class="good">
    <p class="p1">Hello World</p>
    <p class="p2">World</p>
</div>
<br />
<div class="good">
    <p class="p1">Hello</p>
    <p class="p2">World</p>
</div>
<br />
<div class="good">
    <p class="p1">Hello</p>
    <p class="p2">Hello World</p>
</div>

CSS

div {
    display:-moz-box; /* Firefox */
    display:-webkit-box; /* Safari and Chrome */
    display:box;
    width:300px;
    border:1px solid black;
}

.p1 {
    -moz-box-flex:1.0; /* Firefox */
    -webkit-box-flex:1.0; /* Safari and Chrome */
    box-flex:1.0;
}

.p2 {
    -moz-box-flex:2.0; /* Firefox */
    -webkit-box-flex:2.0; /* Safari and Chrome */
    box-flex:2.0;
}

.bad p {
    border: 2px solid #f00;
}

.good p {
    width: 1px;
    border: 2px solid #090;
}