JSFiddle - React, Tailwind, and code Playground

by Emmanuel Garcia

HTML

<div class="row">
  <div class="column column1">
   <img src="https://galeriaomaralonso.com/wp-content/uploads/2019/12/new-logo-goa.svg" width="200" height="auto">
  </div>
  <div class="column column2">
    <h2>HOME  ARTISTS  EXHIBITIONS  CONTACT US</h2>
   
  </div>
</div>

CSS

* {
  box-sizing: border-box;
}
/* Create two equal columns that floats next to each other */
.column {
  float: left;
  width: 50%;
  padding: 0px;
  height: auto; /* Should be removed. Only for demonstration */
}
.column2{text-align:right;}
.row{max-width:1180px; margin:0 auto;}
/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}
/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
  .column1{text-align:center;}
}