How can I align content elements under heading elements?

Question

Is it possible to achieve below alignment by CSS with fixed width, so those two rows would be below each other when they header and content are not in same div?

 <section> <div> <div>Header Text 1</div> <div>Header Text 2</div> <div>Header Text 3</div> <div>Header Text 4</div> <div>Header Text 5</div> </div> <div> <div>Content 1</div> <div>Content 2</div> <div>Content 3</div> <div>Content 4</div> <div>Content 5</div> </div> </section>

Answer 1

Indeed you can, to more simplify this process you can break the structure of your html code and then style them using Flexbox ( not necessary, but it's convenient) accordingly.

html

  <section>
   <div id="first_row">
      <div>
         Element
      </div>
      <div>
         Element
      </div>
      <div>
         Element
      </div>
   </div>
   <div id="second_row">
      <div>
         Element
      </div>
      <div>
         Element
      </div>
      <div>
         Element
      </div>
   </div>
   <div id="third_column">
      <div>
         Element
      </div>
      <div>
         Element
      </div>
      <div>
         Element
      </div>
   </div>
</section>

CSS:

#first_row {
  width: 500px;
  background: orange;
  height: 90px;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}
#first_row > div {
  background: yellow;
  width: 100px;
  height: 50px;
  text-align: center;
}
#second_row {
  width: 500px;
  background: red;
  height: 90px;
    display: flex;
  justify-content: space-evenly;
  align-items: center;
}
#second_row > div {
  background: yellow;
  width: 100px;
  height: 50px;
  text-align: center;
}
#third_column {
  width: 200px;
  background: lightblue;
  height: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
}
#third_column > div {
  background: yellow;
  width: 100px;
  height: 50px;
  text-align: center;
}

https://jsfiddle.net/d8t01ypc