JSFiddle - React, Tailwind, and code Playground

HTML

<div id="header">
<div class="header_adjust">
    <div class="left">
        <img src="https://placehold.it/480x150" alt="My Pic" />
    </div><!--left-->
    <div class="right">
        <h2>
        Test test Test Test Test Test T          
        </h2>
    </div><!--right-->
    <div id="clear"> </div>
</div><!--header_adjust-->
 </div>

CSS

#header .header_adjust {
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
    }

    #header .left{
        width:17.95833335%;
        float:left;
/*      background-color: red;*/
    }
        #header .left img{
            margin:0%;
            max-width:100%;
            max-height:100%;
            -moz-border-radius:5px 20px 5px; -webkit-border-radius:5px 20px 5px; border-radius:5px 20px 5px;
        }
    #header .right{
        width:79.95833335%;
        max-height:100%;
        min-height:100%;
        margin:0% 1%;
        /*background-color: red;*/
        
    }

@media screen 
  and (max-width: 480px){ 
    #header .header_adjust{
        width:98%;
      display: block;
    }

    #header .header_adjust .left {

        width:100%;
        height: auto;
        margin:0%;
        background-color:red;
    }
        #header .left img{
            margin:0%;
            width:100%;
            height:auto;

        }

    #header .header_adjust .right {
        float:none;
        width:100%;
        height:auto;
        clear:both;
        margin:0%;
        
    }
  }