JSFiddle - React, Tailwind, and code Playground

by Andrey

HTML

<div class="header">
  <div class="header__client-name">
    <p class="client-name">
      встроенный хедер
    </p>
  </div>

  <div class="header__generated-info">

    <div class="generation-info">
      <table class="generation-info__table">
        <tr>
          <td class="generation-info__title pale">Generation Date:</td>
          <td class="generation-info__date">{{ (getCurrentDate) 'date'}}</td>
        </tr>
        <tr>
          <td class="generation-info__title pale">Generation Date:</td>
          <td class="generation-info__date">User Name</td>
        </tr>

      </table>

      <!--  <p class="generation-info__item">
<span class="generation-info__title pale">Generated By:</span>
<span class="generation-info__date">
{{formattingWrapper (getCurrentDate) 'date'}}
</span>
</p>
<p class="generation-info__item">
<span class="generation-info__title pale">Generated By:</span>
<span class="generation-info__name">User Name</span>
</p> -->
    </div>
  </div>


</div>

<section class="summary">
  <h3 class="section-title section-title__summary">
    SUMMARY OF PAYMENT
  </h3>
  <div class="divider"></div>

  <div class="summary-list three-columns">

    <div class="summary-list__item summary-list__item_left">
      <table class="">
        <tr>
          <td class="summary-list__title">
            Project Type 
          </td>
          <td class="summary-list__value">
            {{data.project_in}} 
          </td>
        </tr>

        <tr>
          <td class="summary-list__title">
            Project Name
          </td>
          <td class="summary-list__value">
            {{data.projeme}}
          </td>
        </tr>

        <tr>
          <td class="summary-list__title">
            Project Description
          </td>
          <td class="summary-list__value">
            {{data.project}}
          </td>
        </tr>

      </table>
    </div>
    <div class="summary-list__item summary-list__item_center">
      <table class="">
        <tr>
...

CSS

h1,
h2,
h3,
h4 {
  margin: 0;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

p {
  margin: 8px 0;
}

li {
  list-style: none;
}

html {
  margin: 0 0 5cm 0;
  font-size: 16px;
}

body {
  /*background: grey;*/
  /*margin: 0cm 0cm 5cm 0cm;*/
  font-family: sans-serif;
  font-size: 14px;
}

.header {
  /*display: flex;*/
  /*flex-direction: row;*/
  /*Justify-content: space-between;*/
}

.generation-info {
  display: block;
}

.section-title__summary {
  text-align: left;
  font-size: 14px;
  margin: 0 0 10px;
}

.summary-list {
  /*height: 100px;*/
  /*display: flex;*/
  /*flex-direction: row;*/
  /*flex-wrap: wrap;*/
  /*justify-content: center;*/
  width: 100%;
  padding-bottom: 6px;
}

.summary-list__item {
  /*max-width: 300px;*/
  /*margin: 0;*/
  /*border-spacing: 10px 5px;*/
  font-size: 16px;
  /* width: 33.3%; */
  display: inline-block;
  vertical-align: top;
}

.summary-list__item_left {
  float: left;
  max-width: 40%;
  background: blue;
}

.summary-list__item_center {
  text-align: center;
  max-width: 30%;
}

.summary-list__item_right {
  float: right;
  text-align: right;
  max-width: 30%;
  background: green;
}

/*//////////////*/

.summary-list__item table {
  width: 100%;
  display: inline;
}

.summary-list__item_left {
  float: left;
}

.summary-list__item_center {
  text-align: center;
}

.summary-list__item_right {
  float: right;
  text-align: right;
}

/*
///////////////
*/

.summary-list__title,
.summary-list__value {
  padding: 6px 0 0 0;
}

.summary-list__title {
  color: #b6b6b6;
  /*margin-right: 20px;*/
  text-align: right;
  padding-right: 5px;
  white-space: nowrap;
  vertical-align: top;
}

.summary-list__title_total {
  color: #000;
}

.summary-list__value {
  padding-left: 10px;
  text-align: left;
}

.summary-list__value_total {
  color: #000;
}

/*.grid-wrapper {*/

/*    margin-bottom: 30px;*/

/*}*/

.client-value {
  display: inline;
}

.grid-info__metadata__project-period_black {
  color: #000;
}

table {
 ...

JavaScript

const leftElem = document.querySelector('.summary-list__item_left');
const centerElem = document.querySelector('.summary-list__item_center');
const rightElem = document.querySelector('.summary-list__item_right');
const leftEdge = leftElem.offsetWidth;
const rightEdge = rightElem.offsetLeft;
const availableSpace = (rightEdge - leftEdge) - centerElem.offsetWidth -8;

console.log('availableSpace', leftElem.offsetLeft, leftElem.offsetWidth, rightEdge, centerElem.offsetWidth, availableSpace);

centerElem.style.paddingLeft = availableSpace/2 + 'px';
centerElem.style.backgroundColor = 'red';