JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
	<div class="item-container">
		<div class="item item1"></div>
  	<div class="item item2"></div>
	</div>
  <div class="item item3"></div>
</div>

CSS

.container {
  display: flex;
  flex-direction: column;
  padding: 0 10vw; 
	background-color: grey;
}
.item-container {
	background-color: cyan;
}
.item1, .item2 {
  margin-bottom: 20px;
}

.item1 {
  height: 120px;
  background-color: yellow;
}
.item2 {
  height: 150px;
  background-color: orange;
}
.item3 {
  height: 350px;
  background-color: red;
}

@media (min-width: 700px) {
  .container {
    flex-direction: row;
  }
	.item-container {
		margin-right: 20px;
	}
  .item {
    width: 30vw;
  }
}