JSFiddle - React, Tailwind, and code Playground

by 규연 황

HTML

<div class="grid-container">
  <div class="name">name</div>
  <div class="age1">age1</div>
  <div class="age2">age2</div>
  <div class="height1">height1</div>
  <div class="height2">
    <p>height2</p>
    <p>height2</p>
    <p>height2</p>
  </div>
</div>

<div class="flax-container">
  <div class="name">name</div>
  <div class="group">
    <div class="age1">age1</div>
    <div class="age2">age2</div>
    <div class="height1">height1</div>
    <div class="height2">
      <p>height2</p>
      <p>height2</p>
      <p>height2</p>
    </div>
  </div>
  
</div>

CSS

* {box-sizing: border-box;}

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto auto;
  grid-template-areas: "name age1 age2" "name height1 height2";
}
.grid-container > div {
  border: 3px solid red;
}
.grid-container .name { grid-area: name; }
.grid-container .age1 { grid-area: age1; }
.grid-container .age2 { grid-area: age2; }
.grid-container .height1 { grid-area: height1; }
.grid-container .height2 { grid-area: height2; }


.flax-container {
  display: flex;
  margin: 30px 0;
}
.flax-container > div {
  border: 3px solid red;
}
.flax-container > div > div {
  border: 3px solid #000;
}
.flax-container .name {
  width: 33.333%;
}
.flax-container .group {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
}
.flax-container .group > div {
  width: 50%;
}