JSFiddle - React, Tailwind, and code Playground

by ken3desu

HTML

<div class="grid-container">
  <div class="name-label">名前</div>
  <div class="name-value">浜松太郎</div>
  <div class="amount-label">料金</div>
  <div class="amount-value">1,000円</div>
  <div class="email-label">メールアドレス</div>
  <div class="email-name">hamamatsu@exampele.com</div>
  <div class="submit-btn"><button>送信</button></div>
</div>

CSS

.grid-container {
  border: 1px solid;
  padding: 5px;
  word-break: keep-all;
  width: fit-content;
  display: grid;
  grid-template-columns: max-content max-content 10px max-content max-content;
  grid-template-rows: repeat(2, 1fr);
  gap: 0px 10px;
  grid-template-areas:
    "name-label name-value . email-label email-name"
    "amount-label amount-value . submit-btn submit-btn";
}
[class$="-label"]{
  text-align: end;
}
.submit-btn{
  display:flex;
  justify-content: center;
  align-items:center;
}

.name-label { grid-area: name-label; }

.name-value { grid-area: name-value; }

.amount-label { grid-area: amount-label; }

.amount-value { grid-area: amount-value; }

.email-label { grid-area: email-label; }

.email-name { grid-area: email-name; }

.submit-btn { grid-area: submit-btn; }