JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrap">
  <div class="left">
    <p>text:</p>
  </div>

  <div class="right">
    <div class="img"></div>
  </div>                            
</div>

CSS

.wrap{
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: flex-start;
}

    .left{
        width: 50%;
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
        align-items: flex-start;
        flex-direction: column;

    }    
    
    .right{
        width: 50%;
        display: flex;
        flex-wrap: nowrap;
        justify-content: flex-end;
        align-items: flex-start;
    }    

        .img{
            width: 100%;
            height: 100px;
            background: red
        }