JSFiddle - React, Tailwind, and code Playground

by jimousse

HTML

<div class="one">
	<button class="two">
		<span class="four">
		  <span class="three">
			  Hello
		  </span>
		</span>
	</button>
</div>

CSS

.one {
	height: 300px;
	display: flex;
	flex-direction: row;
  align-items: stretch;
	border: 1px solid black;
}

.two {
	background: lightcoral;
	flex-grow: 1;
}

.four {
	background: lightcoral;
	display: flex
	flex-direction: row;
  align-items: stretch;
	flex-grow: 1;
}

.three {
  flex-grow: 1;
	background: lightgoldenrodyellow;
}