JSFiddle - React, Tailwind, and code Playground

by Sean

HTML

<div class="main-div">
      <div class="main-div-line-1">
        Kitty Averages
      </div>
      <div class="main-div-line-2">
        <div class="inner-main-left">
          <div class="inner-left-left-top">
            helloKitty Top
          </div>
          <div class="inner-left-left-middle">
            helloKitty Middle
          </div>
          <div class="inner-left-left-bottom">
            helloKitty Bottom
          </div>
        </div>
        <div class="inner-main-right">
          <img id="main-kitty-image" src="https://i.imgur.com/JmY6X13.jpg"/>
        </div>
      </div>
    </div>

CSS

.main-div {
      border: 1px solid black;
    }

    .main-div-line-1 {
        border-bottom: 1px solid rgba(0,0,0,.125);
        padding: 5px;
        font-family: "Proxima Nova Bold";
        font-size: 20px;
        text-align: center;
    }

    .main-div-line-2 {
        display: flex;
    }

    .inner-main-left {
        display: flex;
        position: relative;
        flex-direction: column;
        width: 50%;
    }

    .inner-left-left-top {
       /* position: absolute;*/
       flex: 0 0 100px;
    }

    .inner-left-left-middle {
        flex: 0 0 100px;
    }

    .inner-left-left-bottom {
        flex: 0 0 100px;
    }

    .inner-main-right {
        display: flex;
    }

    #main-kitty-image {
        width: 360px;
    }
    .inner-main-right {
      display: flex;
      width: 50%;
    }