JSFiddle - React, Tailwind, and code Playground

HTML

<div class="main">
  <div class="text">
    <h2>asdsadsad</h2>
    <h3>qwoidiojqwdjoiijoqwdijijoqwjoidijoqwd</h3>
      <button>Button</button>
  </div>
  <div class="image">
    <img src="http://images.gizmag.com/hero/ibm_human_brain.jpg" />
  </div>
    
  <div class="clear"></div>
</div>

CSS

body {
        background:black;
}
.main {border:1px solid #faa;
        width:350px;
    position:relative;
}
.text {background-color:#eee;
    padding:4px;border-radius:10px;
    margin-top:15px;
    height:150px;
    font-size:11pt;   
}
.image {position:absolute;top:0px;right:20px;
    
}
.image img{border:1px solid #afa;
    height:200px;width:150px;
    }
.clear {
        clear:both;
}

button{position:absolute;bottom:20px;right:20px;z-index:2;padding:5px;}


@media screen and (max-width:500px){	
 
    .image img{width:75px;height:100px;}
    .text{height:60px;font-size:10pt;color:#faa;}
    .main{width:200px;}
}

@media screen and (max-width:300px){	
 
    .image img{width:45px;height:50px;}
    .text{height:30px;font-size:6pt;color:#aaf;}
    .main{width:100px;}
}