CSS table elements with a double border in the middle

Question

I am trying to create a CSS-based table layout that has a uniform distance / border around each table cell and making sure that the cell tables always have the same height. Here is an example of what I'm trying to achieve:

Currently, my HTML looks like this:

.two-col.body-width {
  max-width: 1138px;
}
.two-col {
  display: table;
  clear: both;
  margin: 0 auto;
  padding: 20px 0;
  width: 100%;
  box-sizing: border-box;
  border-spacing: 25px 0px;
}
.two-col > .col_container.align-top {
  vertical-align: top;
}
.layout .section-tout {
  position: relative;
  padding: 20px 40px 48px;
  background: #f4f4f3;
  border-left: 5px solid #da202a;
}
.two-col > .col_container {
  width: 50%;
  display: table-cell;
  text-align: left;
  vertical-align: middle;
  box-sizing: border-box;
}

<section class="layout two-col body-width">
  <div class="col_container align-top section-tout">
    <!-- content goes here -->
  </div>
  <div class="col_container align-top section-tout">
    <!-- content goes here -->
  </div>
</section>

Run codeHide result

Here is a working example: https://jsfiddle.net/grzkgdp3/1/

What I have here is almost perfect, but as you can see from the image I'm updating, I need the gap / border to double in the middle, and I don’t see a reasonable way to do this.

, border: 25px solid white; -. , , , - :after, .

- , , .

!

, flexbox, IE9 .

Answer 1

, . linear-gradients .

body {
  background: white;
}

.two-col.body-width {
  max-width: 1138px;
}

.two-col {
  display: table;
  clear: both;
  margin: 0 auto;
  padding: 20px 0;
  width: 100%;
  box-sizing: border-box;
}

.two-col > .col_container.align-top {
  vertical-align: top;
}

.layout .section-tout p {
  position: relative;
  padding: 20px 40px 48px;
  margin: 0;
}

.two-col > .col_container {
  width: 50%;
  display: table-cell;
  text-align: left;
  vertical-align: middle;
  box-sizing: border-box;
  padding: 0px 25px;
  background-image: linear-gradient(to right, transparent 25px, #da202a 25px, #da202a 30px, #f4f4f3 30px, #f4f4f3 calc(100% - 25px), transparent 0);
  background-image: -ms-linear-gradient(to right, transparent 25px, #da202a 25px, #da202a 30px, #f4f4f3 30px, #f4f4f3 -ms-calc(100% - 25px), transparent 0);
}

<section class="layout two-col body-width">
  <div class="col_container align-top section-tout">
    <p>
      See how there is different amounts of content, but the cells are always the same height, this is very important!
    </p>
  </div>
  <div class="col_container align-top section-tout">
    <p>
      Hi!
    </p>
  </div>
</section>

Hide result

( calc)

Answer 2

Flexbox

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body {
  background: white;
}
.two-col.body-width {
  max-width: 1138px;
  padding: 25px;
}
.two-col {
  display: flex;
  margin: 0 auto;
  box-sizing: border-box;
}
.layout .section-tout {
  position: relative;
  background: pink;
  padding: 20px;
  border-left: 5px solid #da202a;
  flex: 0 1 50%;
  display: flex;
}
.two-col > div:first-child {
  margin-right: 50px;
}

<section class="layout two-col body-width">
  <div class="col_container align-top section-tout">
    <p>
      See how there is different amounts of content, but the cells are always the same height, this is very important!
    </p>
  </div>
  <div class="col_container align-top section-tout">
    <p>
      Hi!
    </p>
  </div>
</section>

Hide result