JSFiddle - React, Tailwind, and code Playground

by tea4two

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<div class="container">
<header class="clearfix">
  <h1 class="logo">
    <a href="#" class="logoLink">
    <span class=""><img src="http://placehold.it/80x60/ff9900/ffffff" alt="" class="logoImg">
    </span>
    <span>ロゴテキスト<br>2行目</span>
    </a>
  
  </h1>
  <div class="utility cleafix">
      <p>なんぞ</p>
      <div>なんぞ</div>
  </div>
  
  <!-- <p>クリアしてくれる要素</p> -->
  <!-- ::after -->
</header>
<div class="main">
  メインコンテンツ
</div>
</div>

<table>
  <tr>
    <td><img src="" alt=""></td>
    <td>ロゴテキスト</td>
  </tr>
</table>
<a href="#" class="logoLink">
    <span class=""><img src="http://placehold.it/80x60/ff9900/ffffff" alt="" class="logoImg">
    </span>
    <span>ロゴテキスト<br>2行目</span>
</a>

CSS

.container {
  width: 400px;
  margin: 0 auto;
}
header {
  background-color: lightgreen;
}
.clearfix:after {
  content: "";
  display: table;
  clear: both;
}
.logo {
  float: left;
}

.logoLink {
  display: table;
}
.logoLink span {
  display: table-cell;
  vertical-align: middle;
}
.logoLink span:first-child {
  padding-right: 10px;
}


.utility {
  float: right;
}

table {
  border-collapse: collapse;
}
table td{
  padding: 10px;
  border: 1px solid #000;
}