JSFiddle - React, Tailwind, and code Playground

HTML

<div id="proBox">
	<div class="proTopBox">
		<div class="proActInfo"></div>
		<div class="basicAcInfo"></div>
	</div>
	<div class="proBottomBox"></div>
</div>

CSS

#proBox {
	width: 790px;
	min-height: 620px;
	display: flex;
	margin: 45px auto 66px;
	flex-direction: column;
}

.proTopBox {
	min-height: 500px;
	margin-bottom: 40px;
	display:flex;
}

.proBottomBox  {
	min-height: 230px;
	display:flex;
}

.proActInfo {
	border: 1px solid blue;
	flex-basis: 500px;
	display:flex;
}

.basicAcInfo {
	border: 1px solid blue;
	display:flex;
	flex-grow: 1;
    background-color: purple;
}