: после элемента не отображается после элемента

Question

У меня проблема с вертикальной красной линией в конце контейнера .techDataInfo. По какой-то причине он ставит после .techDataInfo img.

Смотрите изображение, которое я имею ниже. Вот как я хочу, чтобы это выглядело. Я также не могу заставить vertical-align: middle работать на красную линию.

Кто-нибудь видит, что я делаю неправильно?

.techDataBlock:after {
  content: '';
  display: block;
  width: 80%;
  height: 1px;
  background: #CFCFCF;
  margin: 60px auto;
}

.techDataInfo,
.techDateTableCont {
  display: inline-block;
  vertical-align: top;
  height: auto;
}

.techDataInfo {
  width: 40%;
}

.techDataInfo:after {
  content: '';
  width: 2px;
  height: 300px;
  display: inline-block;
  /*vertical-align: middle;*/
  background: #b82222;
}

.techDataInfo img {
  width: 50%;
  height: auto;
}

.techDateTableCont {
  width: 60%;
}

<div class="techDataBlock">
  <div class="techDataInfo">
    <h2 class="techDataBlockTitle">General Information</h2>
    <img src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/242ce817-97a3-48fe-9acd-b1bf97930b01/09-posterization-opt.jpg" alt="Img">
  </div>
  <div class="techDateTableCont">
    <table>
      <tr>
        <th>Type</th>
        <th>Measure</th>
      </tr>
      <tr>
        <td>EN AW-Al Mg Si 0.5</td>
        <td>EMaterial Designation DIN EN 573</td>
      </tr>
      <tr>
        <td>Tensile strength RM</td>
        <td>min. 245 N/mm²</td>
      </tr>
      <tr>
        <td>Yield Point Rp 0.2</td>
        <td>min. 195 N/mm²</td>
      </tr>
      <tr>
        <td>Ductile yield A5</td>
        <td>min. 10%</td>
      </tr>
      <tr>
        <td>Ductile yield A10</td>
        <td>min. 8%</td>
      </tr>
      <tr>
        <td>Moulus of elasticity E</td>
        <td>70.000 N/mm²</td>
      </tr>
      <tr>
        <td>Hardness HB</td>
        <td>approx. 75 Brinell hardness</td>
      </tr>
      <tr>
        <td>Coefficient of Linear expansion</td>
        <td>23.4 x 10⁻⁶ 1/K</td>
      </tr>
    </table>
  </div>
</div>

Answer 1

Попробуйте это

.techDataBlock:after {
  content: '';
  display: block;
  width: 80%;
  height: 1px;
  background: #CFCFCF;
  margin: 60px auto;
}

.techDataInfo,
.techDateTableCont {
  display: inline-block;
  vertical-align: top;
  height: auto;
}

.techDataInfo {
  width: 40%;
 justify-content: space-between;
 display: flex;
 flex-wrap: wrap;
 align-items: center;
}

.techDataInfo:after {
  content: '';
  width: 2px;
  height: 300px;
  display: inline-block;
  /*vertical-align: middle;*/
  background: #b82222;
 
}

.techDataInfo img {
  width: 50%;
  height: auto;
}

.techDateTableCont {
  width: 60%;
}

<div class="techDataBlock">
  <div class="techDataInfo">
    <h2 class="techDataBlockTitle">General Information</h2>
    <img src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/242ce817-97a3-48fe-9acd-b1bf97930b01/09-posterization-opt.jpg" alt="Img">
  </div>
  <div class="techDateTableCont">
    <table>
      <tr>
        <th>Type</th>
        <th>Measure</th>
      </tr>
      <tr>
        <td>EN AW-Al Mg Si 0.5</td>
        <td>EMaterial Designation DIN EN 573</td>
      </tr>
      <tr>
        <td>Tensile strength RM</td>
        <td>min. 245 N/mm²</td>
      </tr>
      <tr>
        <td>Yield Point Rp 0.2</td>
        <td>min. 195 N/mm²</td>
      </tr>
      <tr>
        <td>Ductile yield A5</td>
        <td>min. 10%</td>
      </tr>
      <tr>
        <td>Ductile yield A10</td>
        <td>min. 8%</td>
      </tr>
      <tr>
        <td>Moulus of elasticity E</td>
        <td>70.000 N/mm²</td>
      </tr>
      <tr>
        <td>Hardness HB</td>
        <td>approx. 75 Brinell hardness</td>
      </tr>
      <tr>
        <td>Coefficient of Linear expansion</td>
        <td>23.4 x 10⁻⁶ 1/K</td>
      </tr>
    </table>
  </div>
</div>

Answer 2

Я думаю, что это хорошее место для использования свойств flexbox display:flex, а flex-wrap: wrap поместит элементы в новую строку, если в строке недостаточно места.

Позволяет выровнять элементы в центре по align-items:center, а также разделить их по различным критериям justify-content: space-around|space-between

.techDataBlock:after {
  content: '';
  display: block;
  width: 80%;
  height: 1px;
  background: #CFCFCF;
  margin: 60px auto;
}

.techDataInfo,
.techDateTableCont {
  display: inline-block;
  vertical-align: top;
  height: auto;
}

.techDataInfo {
  width: 40%;
}

.techDataInfo:after {
  content: '';
  width: 2px;
  height: 300px;
  display: inline-block;
  /*vertical-align: middle;*/
  background: #b82222;
}

.techDataInfo img {
  width: 50%;
  height: auto;
}

.techDateTableCont {
  width: 60%;
}

.techDataInfo{
 display: flex;
 flex-wrap: wrap;
 justify-content: space-around;
 align-items: center;
}

<div class="techDataBlock">
  <div class="techDataInfo">
    <h2 class="techDataBlockTitle">General Information</h2>
    <img src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/242ce817-97a3-48fe-9acd-b1bf97930b01/09-posterization-opt.jpg" alt="Img">
  </div>
  <div class="techDateTableCont">
    <table>
      <tr>
        <th>Type</th>
        <th>Measure</th>
      </tr>
      <tr>
        <td>EN AW-Al Mg Si 0.5</td>
        <td>EMaterial Designation DIN EN 573</td>
      </tr>
      <tr>
        <td>Tensile strength RM</td>
        <td>min. 245 N/mm²</td>
      </tr>
      <tr>
        <td>Yield Point Rp 0.2</td>
        <td>min. 195 N/mm²</td>
      </tr>
      <tr>
        <td>Ductile yield A5</td>
        <td>min. 10%</td>
      </tr>
      <tr>
        <td>Ductile yield A10</td>
        <td>min. 8%</td>
      </tr>
      <tr>
        <td>Moulus of elasticity E</td>
        <td>70.000 N/mm²</td>
      </tr>
      <tr>
        <td>Hardness HB</td>
        <td>approx. 75 Brinell hardness</td>
      </tr>
      <tr>
        <td>Coefficient of Linear expansion</td>
        <td>23.4 x 10⁻⁶ 1/K</td>
      </tr>
    </table>
  </div>
</div>