JSFiddle - React, Tailwind, and code Playground

by etienne_carre

HTML

<html>
<head>
<title></title>

<style type="text/css" media="screen">
    .menu-item {
    border: 1px solid green;
    width:550px;
}
.depth-1 {
    margin-left: 10px;
    float:left;
}

.depth-2{
  margin-left: 20px;
}

.menu-item  .info{
  width:400px;
  float:left;
}

.menu-item .info .header {
    background-color:gray;
}

.menu-item .info .detail {
    background-color:silver;
}

.menu-item .price {
    float: left;
    width: 150px;
    background-color:gray;
}
    
  </style>
</head>
<body>

<div class="menu-item">
  <div class="info">
    <div class="depth-1 header">wakame-hijiki seaweed salad</div>   
    <div class="depth-1 detail">cucumber / carrot / daikon / apple  || cucumber / carrot / daikon / apple / ginger dressing || cucumber apple / ginger dressing</div> 
  </div>
  <div class="price">9.0</div>

  <div style="clear:both;height:1px;overflow:none;"></div>


</div>


</body>
</html>