JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
	<div class="one">
		<div>one</div>
	</div>
	<div class="two">
		<div>two</div>
	</div>
	<div class="three">
		<div>three</div>
	</div>
</div>

CSS

html, body{height:100%;}

.container{
	width:100%;
	height:100%;
    display: table;
}
div > div {
  display: table-cell;
}

.three div{margin-top:100px}/*why doesnt this move?*/
.one {min-width:196px;width:15%; background:#ccc}
.two {width: 60%; background:#cba}
.three {min-width:196px;width: 25%; background:#ca8}