JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<div class="banner_container">
<div class="banner">{banner}</div>

<div class="banner_img_position">
<div class="banner_img_container">
<div class="banner_img">
{AN IMAGE}
</div>
</div>
</div>

<div class="banner_text_position">
<div class="banner_text_container">
<div class="banner_text">
Title: This is a very long headline covering two very long lines
</div>
</div>
</div>

</div>

<!-- Ligma -->

<div class="main">
Some Text...
</div>

CSS

body {margin:0;}
.banner_container {position:relative;}

.banner {height:400px;background-color:#cccccc;}

.banner_text_position, .banner_img_position {position: absolute;width:100%;top: 50%;transform: translateY(-50%);}

.banner_text_container, .banner_img_container {max-width:900px;margin:auto;}

.banner_text {background-color:#999999;display:block;padding:20px;max-width:250px;box-sizing: border-box;}

.banner_img {background-color:#888888;display:inline-block;padding:20px;float:right;}
  
@media screen and (max-width:480px){
.banner_img_position {display:none;}
.banner_text_position, .banner_img_position {position: relative;width:100%;top: auto;transform: translateY(0%);}
.banner_text {max-width:100%;width:100%;}
.banner {height:200px;}
}

.main {max-width:900px;margin:auto;}