JSFiddle - React, Tailwind, and code Playground

by james0n

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.8/semantic.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.8/semantic.min.js"></script>
<div class="cont">
  <div>
    <i class="star icon"></i>
  </div>
  <div>
  
    <h2>
      Order 24680
    </h2>
    <p class="something">
      Supplier: Maviteknik Oy<br> Project: X/181015 

    </p>

    <h3>
      Positions
    </h3>
    <p>
      <div class='poslist'>
        <div class='position'>
          <div>
            00010 Nuts and bolts
          </div>
          <div class='specify'>
          No materials added<br/>
            <Button  class='ui basic tiny button'>
Add material
</Button>




          </div>
          <div>
          
  
          <div class="ui  mini  blue label">Shipment 24</div>
              </div>
          <div class='delivery'>
            <div class="ui  mini  green label">Checkpoint</div><br>
            Rauma port<br> Meritie 2, 33200 Rauma
          </div>
          <div>
          <i class="calendar outline icon"></i>
            15.12.2018
          </div>
          <div>
            <i class="circular ellipsis vertical icon"></i>
          </div>
        </div>
        <div class='position'>
          <div>
            00020 Screws and stuff
          </div>
          <div class='specify'>
            <div class='ui green tiny label basic'>
              Completed</div><br> 
              2 materials specified
            
          </div>
          <div>
          
    
       
            <div class="ui  mini  blue label">Shipment 22</div>
                  </div>
          <div class='delivery'>
            <div class="ui    grey label">Not defined</div><br>
            <b> </b><br> 
          </div>
      
          <div>
          <i class="calendar outline icon"></i>
            15.12.2018
          </div>
          <div>
            <i class="circular ellipsis vertical icon"></i>
          </div>
       ...

SCSS

body {
  padding: 5em;
}

.cont {
  display:flex;
  margin-top:1em;


  > * {
    padding:1.5em;
 
  }
}

.something  {

  text-transform:uppercase;
  color:#444;
  font-size:0.8rem;
  margin-top:-1rem;
}

.poslist {
  height:200px;
  overflow:auto;
  display:table;
}

.position {
 display:table-row;
 background-color:#ffe;

 padding:1rem;
 > * {
   vertical-align:top;
 padding:1em;
 display:table-cell;



  white-space: nowrap;

 }
}
.specify {
  display:inline-block;
}