JSFiddle - React, Tailwind, and code Playground

by ponyspy

HTML

<table border="0" cellpadding="0" cellspacing="0" style="margin:0; padding:0">

  <tr class='title h1'>
    <td>Заголовок раздела</td>
    <td colspan='2'>пояснение для заголовка</td>
  </tr>
  
  <tr>
    <td class='category'>Метраж:</td>
    <td class='val'>1800м<sup>2</sup></td>
    <td class='addon'>дополнение</td>
  </tr>
  
  <tr class='spacer'></tr>
  
  <tr>
    <td class='category'>Метраж:</td>
    <td class='val'>2100мм</td>
    <td class='addon'>до ферм</td>
  </tr>
  <tr>
    <td></td>
    <td class='val'>3400мм</td>
    <td class='addon'>до навесного потолка</td>
  </tr>
  <tr>
    <td></td>
    <td class='val'>5100мм</td>
    <td class='addon'>дополнение</td>
  </tr>
  
  <tr class='title h2'>
    <td>Маленький заголовок подраздела</td>
    <td colspan='2'>пояснение для заголовка</td>
  </tr>
  
  <tr>
    <td class='category'>Метраж 1:</td>
    <td class='val'>1800м<sup>2</sup></td>
    <td class='addon'>дополнение</td>
  </tr>
  
  <tr>
    <td class='category'>Метраж 2:</td>
    <td class='val'>1800м<sup>2</sup></td>
    <td class='addon'>дополнение</td>
  </tr>  
  
  <tr>
    <td class='category'>Метраж длинный:</td>
    <td class='val'>1800м<sup>2</sup></td>
    <td class='addon'>дополнение</td>
  </tr>   
  
</table>

CSS

td {
  padding-top: 15px;
  vertical-align: top;
}

.title.h1 {
  font-size: 16pt;
}

.title.h2 {
  font-size: 12pt;
  font-weight: bold;
}

.spacer {
  height: 20px;
}

.category {
  width: 280px;
  border-bottom: 1px solid black;
}

.val {
  border-bottom: 1px solid black;
  display: inline-block;
  font-weight: bold;
}

.addon {
  padding-left: 40px;
}