JSFiddle - React, Tailwind, and code Playground

by beau

HTML

<header>
  </header>
  <div role="main">
<header>
  <h1>Casey's<br/>Pizza</h1>
  <h2>Old World Pies Reinvented</h2>
</header>
<h3>Whole Pies</h3>
<div class="menu-item">
  <h4>Margherita</h4>
  <span class="price">13</span>
    <ul>
      <li>tomato</li>
      <li>aged mozzarella</li>
      <li>fior di latte</li>
      <li>grana padano basil</li>
      <li>extra virgin olive oil</li>
    </ul>
</div><!-- /. menu-item -->
<div class="funghi">
  <p>
    Funghi
    <span>15</span>
  </p>
  <p>crimini and shitake, thyme, garlic, aged mozzarella, fior de latte, grana padano, chili flake, extra virgin olive oil</p>
</div>
      
<div class="arugala">
  <h4>Arugula</h4>
  <p>fresh arugula, spring onion, green garlic, aged mozzarella, fior di latte, grana padano, extra virgin olive oil, lemon juice</p>
  <div class="price">15</div>
</div>

<div class="rapini">
  <div class="title">Rapini Rapini Rapini Rapini Rapini Rapini Rapini Rapini Rapini Rapini Rapini Rapini Rapini Rapini Rapini</div>
  <div class="price">15</div>
  <div class="ingredients">broccoli rabe, yellow onion, aged mozzarella, fior de latte, grana padano, extra virgin olive oil, lemon juice</div>
</div>
      
  </div>
  <footer>
  </footer>

CSS

header {
  background: #aaa;
  padding:  20px 10px;
  text-align: right;
}
header h1 {
 font-size:  1.8em;
 text-transform: uppercase;
}
header h2 {font-size: 1.5em;}
.menu-item {
  
}
.menu-item h4 {
  display: inline-block;
  font-size: 1.2em;
}
.menu-item ul, .menu-item li {
  margin: 0;
  padding: 0;
  list-style: none;
}
.menu-item li {
  display: inline;
}
.menu-item li:after {
  content: ','; 
}
.menu-item li:last-child:after {
  content: none; 
}
.menu-item .price {
   float:  right;
}
.funghi p:first-child span {
  float: right;
}
.arugala {
  position: relative;
}
.arugala .price {
  position: absolute;
  top: 0;
  right: 15px
}

.rapini .title,
.rapini .price {
 float:  left;
}
.rapini .title {
  width: 85%
}

.rapini .price {
  width: 15%; 
  text-align: right;
}

.rapini .ingredients {
  clear: both;
}