JSFiddle - React, Tailwind, and code Playground

by Stanley Liu

HTML

<div class="stream-body-content">
	<div>
		<!-- 左上 -->
		<div class="s1">S11111</div><!-- 右上 --><div class="s2">S22222</div>
	</div>
	<!-- 下上 -->
	<div class="s3"></div>
</div>

CSS

*{
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
.stream-body-content {
	width: 90%;background-color: black;padding: 1em;
}
.s1 {
	width: 70%;display: inline-block;background-color: red
}
.s2 {
	width: 30%;height: 420px;margin-bottom: 1em;display: inline-block;border: groove;background-color: blue;
}
.s3 {
	width: 99%;height: 260px;margin-bottom: 1em;display: inline-block;
}