Inside a CSS table container, how can I move a single table-cell into the next row by touching only its CSS?

Question

I have the following HTML:

<div class='container'>
  <div class='first'>test</div>
  <div class='second'>test</div>
</div>

accompied by the following CSS:

.container {
  display: table;
  width: 90%;
  background: yellow;
}

.first {
  display: table-cell;
  background: red;
}

.second {
  display: table-cell;
  background: blue;
}

(Also: http://codepen.io/zssz/pen/GodBqQ)

How can I achieve that the second/blue div sits right below the first/red div, by ONLY changing the CSS of .second?

Thank you

(I have no control over the container CSS in this situation)

Answer 1

You can do this:

CSS

.second {
  display: table-row;
  background: blue;
}

DEMO HERE