JSFiddle - React, Tailwind, and code Playground

by ryanseddon

HTML

<div id="one">
    <div class="a">a</div>
    <div class="group">
        <div class="b">b</div>
        <div class="c">c</div>
    </div>                 
</div>

CSS

body {
 color: #000;
}
.a, .b, .c {
    padding: 20px;
    -webkit-box-flex: 1;
  -moz-box-flex: 1;
  box-flex: 1;
}
.a { background: #ecc; }
.b { background: #cec; }
.c { background: #cce; }

#one, #two {
    width: 500px;
    margin: 10px;
    display: -webkit-box;
    display: -moz-box;
    display: box;
    border: 1px solid #333;
}

#one {
    -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  box-orient: vertical;
}

#one .group {
    display: -webkit-box;
    display: -moz-box;
    display: box;
  -webkit-box-orient: horizontal;
  -moz-box-orient: horizontal;
  box-orient: horizontal;

}

@media all and (orientation:landscape) {
#one {
    -webkit-box-orient: horizontal;
  -moz-box-orient: horizontal;
  box-orient: horizontal;
}

#one .group {
    display: -webkit-box;
    display: -moz-box;
    display: box;
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  box-orient: vertical;
}
}