JSFiddle - React, Tailwind, and code Playground

HTML

<!--Вариант 1 -->
<div class="q1"></div>
<div class="q2">q</div>
<!--Вариант 2-->
<div class="a1">
  <div class="a2"></div>
  <span class="text1">Lorem ipsum dolor sit amet, consectetur.</span>
  <span class="text2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione sequi dolores voluptas suscipit iste corrupti.</span>
</div>

CSS

.q1{
  width: 100px;
  height: 200px;
  border: 1px black solid;
  float: left;
  margin-left: 10px;
}
.q2{
  width: 300px;
  height: 100px;
  background: red;
}
.q1, .q2 {
  display: inline-block;
}
.a1 {
  width: 200px;
  height: 150px;
  background-color: red;
  position: relative;
  margin-top: 120px;
  padding: 5px;
}
.a2 {
  width: 50px;
  min-height: 50px;
  background-color: green;
  position: absolute;
  top: 0;
  left: 0;
}
.text1 {
  display: block;
  width: 100px;
  margin-left: 60px;
}