JSFiddle - React, Tailwind, and code Playground

by Stanley Liu

HTML

<div class="stream-body-content clearfix">
	<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%;background-color: red;float:left;
}
.s2 {
	width: 30%;height: 420px;margin-bottom: 1em;float:left;border: groove;background-color: blue;float:left;
}
.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}
.s3 {
	width: 99%;height: 260px;margin-bottom: 1em;float:left;
}