JSFiddle - React, Tailwind, and code Playground

by sj_shyam_joshi

HTML

<section class="banner">
  <table>
    <tr>
      <td>
        <div>
          <img
            class="logo"
            src="https://cdn.sstatic.net/Sites/stackoverflow/Img/favicon.ico"
          />
          <h1>Title</h1>
        </div>
      </td>
      <td>
        <nav>
          <button>Button 2</button>
          <button>Button 1</button>
        </nav>
      </td>
    </tr>
  </table>
</section>

CSS

.banner {
  background-color: gray;
  width: 100%;
  height: 80px;
}

.banner table{
  height: 100%;
  width: 100%;
}

table tr td:last-of-type {
  text-align: right;
}

table h1{
  margin: 0;
  display: inline-block;
  vertical-align: middle;
}

table img.logo {
  vertical-align: middle;
}