CSS3: responsive centered row with variable size outter-elements

Question

Update 2

Following @kidconcept's new update about using the table tag, I have modified it to make a centered Table Timeline. Note: copy-pasting @kidconcept's into a local project (not on JS Fiddle) did not have this property. I also added css selectors to make changing direction easier.

---

Thank you for considering my question.

I am trying to make a custom row. What I want to achieve is describe in more detail under the headings description.

In addition I am including a JS Fiddle, which gets me close (maybe) to what I want to achieve (e.g. I put some work in).

I don't really get CSS3 that well, and the tutorials at W3-schools really only cover basics, however a deeper understanding of the difference between display options and what float actually does to the object is not readily given.

So I appreciate your assistance and am eager to learn from you :)

---

Description

JS Fiddle: A tri-element row with fixed size middle element

I am trying to make a row which contains exactly three elements. I want the middle element to have a fixed size and be centered. I want the other two elements (left / right) to have a fixed spacing to the middle element, but be responsive in size, see below:

In addition, I would like to stack these rows with a fixed spacing:

As well as be responsive to a small window size:

Update

Using the answer from @kidconcept you can make a reasonable timeline.

Answer 1

UPDATE: I think this is more easily solved with a table. Simply create a table with three columns and give a fixed width to the middle column.

<table>
<tr>
  <td></td>
  <td class="middle"></td>
  <td></tr>
</table>

td {
  background-color: tomato;
  padding: 2rem;
}

.middle {
  width: 10rem;
}

Table Fiddle

https://jsfiddle.net/botbvanz/2/

---

Problematic Flex method: flex. Learn more about flex here.

<section class="tri-element-rows">
  <div class="left-element"></div>
  <div class="middle-element"></div>
  <div class="right-element"></div>
</section>

html, body {
  height: 100%
}
section {
  display: flex;
  height: 50%;
}

div.middle-element {
  width: 15rem;
  height: 10rem;
}

div.left-element,
div.right-element {
  flex-grow: 1;
}

div {
  background-color: coral;
  margin: 1rem;
}

To achieve the effect simply put three elements within a display: flex box. Set the middle elements width to be fixed, in this case 15rem. Then give the left/right elements flex-grow: 1, which indicates they should fill the remaining space equally. Give all the divs a fixed margin, in this case 1rem.

For the heights, I'm not sure I understood your requirements exactly, but if you want the height of the inner divs to respond to the window you can set their height to be a % of the parent container. For this trick to work you need to remember to set the height of html and body to 100% (this gives them something to be a percentage of. In this case i set the section-height to be 50%, which means that two rows will always fill the screen. One other gotcha is that if you set a padding or a border to the section element, the element will become 50% plus the padding and border. To avoid this, set box-sizing: border-box on the section tag.

Here is a fiddle: https://jsfiddle.net/ksgd6r11/