JSFiddle - React, Tailwind, and code Playground

by digthedoug

HTML

<div class="hbox">
    <div class="itemImage" style="-webkit-box-flex: 1;">
    </div>
    <div class="itemImage" style="-webkit-box-flex: 2;">
    </div>
</div>

<div class="hbox">
    <div class="itemImage" style="-webkit-box-flex: 1;">
        <p>This is some content to show that it messes up the parent's size when added.</p>
    </div>
    <div class="itemImage" style="-webkit-box-flex: 2;">
        <p>This is some content to show that it messes up the parent's size when added.</p>
    </div>
</div>
<div class="hbox">
    <div class="itemImage" style="-webkit-box-flex: 1;">
    </div>
    <div class="itemImage" style="-webkit-box-flex: 2;">
        <p>And if content is only in one of the children...</p>
    </div>
</div>

CSS

.hbox {
    /*display: -webkit-box !important;
    -webkit-box-orient: horizontal;
    -webkit-box-align: stretch;
    display: -moz-box !important;
    -moz-box-orient: horizontal;
    -moz-box-align: stretch;
    display: box !important;
    box-orient: horizontal;
    box-align: stretch;
    background: silver;
    margin: 10px;*/
    
    margin: 10px;
    background-color: silver;
    display: -moz-box;
    display: -ms-box;
    display: -webkit-box;
}

.hbox > * {
    /*-webkit-box-flex: 1;
    -moz-box-flex: 1;
    box-flex: 1;
    display: block;*/
}

.itemImage {
    padding: 10px;
    margin: 10px;
    background: #ff0000;
    /*width: 100px;*/
    /*display: -webkit-box !important;
    -webkit-box-orient: vertical;
    -webkit-box-align: start;
    -webkit-box-pack:end;*/
}