JSFiddle - React, Tailwind, and code Playground

HTML

<div class='body'>
  <h1>Some title</h1>
  <div class="image"></div>
  <div class='text'>
    Pellentesque habitant morbi tristique senectus et netus et
    malesuada fames ac turpis egestas. Pellentesque arcu. Ut tempus
    purus at lorem. Nam quis nulla. Aenean placerat. Mauris suscipit,
    ligula sit amet pharetra semper, nibh ante cursus purus, vel
    sagittis velit mauris vel metus. Fusce tellus. Praesent id justo
    in neque elementum ultrices. Sed ut perspiciatis unde omnis iste
    natus error sit voluptatem accusantium doloremque laudantium, totam.
    architecto beatae vitae dicta sunt explicabo. Nulla est. Curabitur
    bibendum justo non orci. Aenean placerat. Praesent in mauris eu tortor
    porttitor accumsan. Maecenas libero. Phasellus enim erat, vestibulum
    vel, aliquam a, posuere eu, velit. Etiam commodo dui eget wisi. Fusce
    dui leo, imperdiet in, aliquam sit amet, feugiat eu, orci. Nemo enim
  </div>
</div>

SCSS

.body {
    display: flex;
    flex-wrap: wrap;
    position: relative
    
    h1 {
        wdith: 100px;
        font-size: 48px;
    }

    .image {
        width: 100%;
        height: 400px;
        background-image: url("https://cdn.pixabay.com/photo/2015/04/19/08/32/marguerite-729510__340.jpg");
        background-repeat: no-repeat;
    }

    .text {
        position: absolute;
        background-color: transparent !important;
        column-count: 2;
        bottom: 0px;
    }
}