JSFiddle - React, Tailwind, and code Playground

by Richard Hunter

HTML

<div class="content">
  <div class="flexbox content-1"><img src="https://live.staticflickr.com/65535/50276010677_4f116d2241_b.jpg" alt="Restaurant design" class="photo1"></div>
  <div class="flexbox content-2">
    <div class="content-mamak">
      <h1 class="header-mamak">Book a consultation</h1>
      <p>Our team will bring your dream to life.</p>
    </div>
  </div>
</div>

CSS

.content {
     display: flex;
     justify-content: center;
   align-items: center;
     width: 60%;
     height: 70%;
     box-shadow: 0px 0px 20px 10px rgba(112, 144, 176, 0.2);
     margin: 0; }
 
 .content1 {
     height: 100%; 
     min-width: 0;
     flex-grow: 2; /*fills up the space */
     flex-basis: 0; }
 
 .content-2 {
     height: 100%; 
     background-color: #7D8FA1;
     flex-grow: 1;
     flex-basis: 0; }
 
 .photo1 {
     width: 100%; 
     height: 100%; }