JSFiddle - React, Tailwind, and code Playground

by rough cheap

HTML

<div class="storage">
  <div class="partition partition-1">
    <div class="partition-wrapper">
      <h4>
        SYSTEM<Br>(S:)
      </h4>
      <p>
        100MB
      </p>
    </div>
  </div>
  <div class="partition partition-2">
    <div class="partition-wrapper">
      <h4>
        MSR<br>予約
      </h4>
      <p>
        16MB
      </p>
    </div>
  </div>
  <div class="partition partition-3">
    <div class="partition-wrapper">
      <h4>
        Windows<br>(W)
      </h4>
      <p>
        200GB
      </p>
    </div>
  </div>
  
  <div class="partition partition-4">
    <div class="partition-wrapper">
      <h4>
        Data<br>(H)
      </h4>
      <p>
        XXXGB
      </p>
    </div>
  </div>
  <div class="partition partition-5">
    <div class="partition-wrapper">
      <h4>
        WinRE<br>回復
      </h4>
      <p>
        500MB
      </p>
    </div>
  </div>
</div>

CSS

.storage {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 7px;
  border: 1px solid grey;
}

.partition {
  padding-right: 6px;
}

.partition:last-of-type {
  padding-right: 0;
}

.partition-wrapper {
  padding: 4px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.partition-1, .partition-2 {
  width: 10%;
}
.partition-3 {
  width: 80%;
}
.partition-4 {
  width: 80%;
}

.partition-5 {
  width: 10%;
}


.partition-1 .partition-wrapper {
  background-color: gold;
}
.partition-2 .partition-wrapper {
  background-color: violet;
}
.partition-3 .partition-wrapper {
  background-color: lightskyblue;
}
.partition-4 .partition-wrapper {
  background-color: palegreen;
}

.partition-5 .partition-wrapper {
  background-color: Blue;
  color: yellow;
}