JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<head>
</head>
<body>
is situation:
	<div class="a">
		<div class="b">
		</div>
		<div class="c">
		</div>
		<div class="d">
		</div>
	</div>
target situation:
	<div class="a2">
		<div class="b">
		</div>
		<div class="c">
		</div>
		<div class="d">
		</div>
	</div>
</body>
</html>

CSS

.a {
   display: flex;
	 border: 1px solid black;
}
.a2 {
   display: flex;
   max-height: 250px;
   border: 1px solid black;
}
.b {
  height: 300px;
	width: 50px;
	border: 1px solid green;
	background-color: green;
}
.c {
  height: 200px;
	width: 50px;
	border: 1px solid blue;
	background-color: blue;
}
.d {
  height: 250px;
	width: 50px;
	border: 1px solid red;
	background-color: red;
}