JSFiddle - React, Tailwind, and code Playground

HTML

<div class="main">
<div class="row1">
<div class="col1">
Col1
</div>
<div class="col2">
Col2
</div>
</div>
<div class="row2">
<div class="col1">
Col1
</div>
<div class="col2">
Col2
</div>
</div>
<div class="row3">
<div class="col1">
Col1
</div>
<div class="col2">
Col2
</div>
</div>
</div>

CSS

.main
{
	min-height: 1000px;
  margin: 100px;
}

.col1
{
	width: 29.9%;
  min-height: 800px;
  display: inline-block;
  float: left;
}

.col2
{
  width: 70%;
  min-height: 800px;
  display: inline-block;
}

.row1 .col1
{
  background: rgba(238,238,34,0.3) url("https://icons.iconarchive.com/icons/graphicloads/100-flat-2/256/24-hours-phone-icon.png") !important;
    background-position: left !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
    background-attachment: fixed !important;
}

.row2 .col1
{
    background: rgba(238,238,34,0.3) url("https://icons.iconarchive.com/icons/graphicloads/100-flat-2/256/abs-icon.png") !important;
    background-position: left !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
    background-attachment: fixed !important;
}

.row3 .col1
{
    background: rgba(238,238,34,0.3) url("https://icons.iconarchive.com/icons/graphicloads/100-flat-2/256/arrow-down-icon.png") !important;
    background-position: left !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
    background-attachment: fixed !important;
}