JSFiddle - React, Tailwind, and code Playground

by ninachroscicka

HTML

<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Raleway" />



<div class = "row">
  <div class = "all" id="row1" style="display: inline-block; float:left;">
  <div class = "part1" style="width:300px;">
  <div class="column">
    <p>Dieta</p>
  </div>
  <div class="column">
    <p>Jedzenie</p>
  </div>
</div>

<div class = "part2" style="width:300px;">
  <div class="column">
    <p>Zdrowejedzenie</p>
  </div>
  <div class="column">
    <p>Instafood</p>
  </div>
</div>

</div>

<div class = "all" id = "row1" style="display: inline-block;">
  <div class = "part1" style="width:300px;">
  <div class="column">
    <p>Wegetarianizm</p>
  </div>
  <div class="column">
    <p>Wege</p>
  </div>
</div>

<div class = "part2" style="width:300px;">
  <div class="column">
    <p>Weganizm</p>
  </div>
  <div class="column">
    <p>Roślinny</p>
  </div>
</div>

</div>

</div>

CSS

.part1 {
  float:left;
}

.part2 {
  float:right;
}




.all {
  border: 5px solid #d49793;
  /*box-shadow: 0px 0px 0px 8px #d49793;*/
  border-radius: 16px;
  font-family: Raleway;
  box-shadow: 3.5px 3.5px 3.5px #E9CBC9;
  text-align: center;
  /*font-weight:400;*/
  /*border-style: dashed;*/
}