JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
  	<div class="box box-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis modi libero, culpa voluptatem beatae nobis, cumque, eius veniam earum ipsam numquam distinctio. Veritatis, pariatur totam sed distinctio in ut maxime explicabo minima aspernatur, sapiente natus quisquam modi a, aut nam. Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae dolores fuga aliquam fugiat. Temporibus, quaerat voluptatum itaque veniam quasi esse aliquid ipsam quae, fugiat beatae quibusdam hic similique quo impedit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil quidem, aperiam, perspiciatis magni quaerat pariatur tempora consequatur qui, cumque quasi repudiandae recusandae voluptate eligendi ratione totam sint in assumenda facere?</div>
		<div class="box box-2">2</div>
  	<div class="box box-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis modi libero, culpa voluptatem beatae nobis, cumque, eius veniam earum ipsam numquam distinctio. Veritatis, pariatur totam sed distinctio in ut maxime explicabo minima aspernatur, sapiente natus quisquam modi a, aut nam.</div>
</div>

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.wrapper {
  width: 80%;
  margin: 20px auto 0;
  position: relative;
	border: 1px solid black;
  padding: 10px 230px 10px 10px;
	color: #fff;
}

.box {
  background: #1C55A7;
  padding: 20px;
  border: 2px solid black;
  margin-bottom: 10px;
}

.box-2 {
  position: absolute;
  top: 10px;
  right: 10px;
  min-width: 210px;
  min-height: 210px;
  background: #5294DB;
}

@media screen and (max-width: 540px) {
	.wrapper {
	  padding: 10px;
	}
  .box-2 {
		position: static;
	}
}