JSFiddle - React, Tailwind, and code Playground

by Csaba Hellinger

HTML

<div class="promoBanner__container">
  <div class="promoBanner__image col-md-8">
    <!-- <img src="<?php echo get_template_directory_uri();?>/images/latest_news.jpg"
        alt="SPURSNEPAL" data-set="true"> -->
    <img src="https://tot-tmp.azureedge.net/media/9833/thfc-media-header-v2.jpg?anchor=center&amp;mode=crop&amp;width=750" alt="" data-set="true">
  </div>

  <div class="promoBanner__content col-md-4">
    <a href="#">
      <h3 class="promoBanner__title">
        Latest News
      </h3>
    </a>
    <p class="promoBanner__description">
      Today's media stories brought to you by NewsNow.
      <br>
      <br> These stories have been specially selected from today's media. They do not necessarily represent the views or position of Tottenham Hotspur Football Club. For total Spurs news coverage, visit NewsNow.co.uk, the UK's #1 football news aggregator.
    </p>
  </div>
</div>

CSS

div.promoBanner__container {
  padding-top: 15px;
}

.promoBanner__image {
  position: absolute;
  background-size: cover;
  height: 100%;
  background-position: 50%;
  width: 76.25%;
}

div.promoBanner__content {
  background-color: rgba(17, 24, 54, .95);
}

div.promoBanner__content {
  position: absolute;
  left: 42%;
  right: 0;
  overflow-y: hidden;
  margin: 0;
  padding: 34px 22px;
}