html - 在保持基本结构的同时对齐 div

Question

这是我的div结构

ONE//顶级

二三//中间层并排放置 2 个 div

四//底层

<div id="ONE">
  <div></div>
  <div><img src="logo.png"></div>
</div>

<div id "FIVE">
  <div id="TWO">
    <div></div>
    <div></div>
  </div>
  <div id="THREE">
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>

<div id="FOUR">
  <div></div>
</div>

我的问题:如何将 TWO 与 THREE 的底部对齐，同时保持相同的顶部、中间和底部 div 设置。

我尝试添加 position :relative;到“五”和 position: absolute 到“二”和“三”。但后来“五”与“一”重叠

编辑: Fiddle

#ONE{
    width: 100px;
    height: 50px;
    background-color: #ff0000;
}
#FIVE{
    width: 100px;
    height: 50px;
    background-color: #cdb79e;
    position:relative;
}
#TWO {
    display: inline-block;
    background-color: #9e0b0f;
    position:relative;
    width: 50px;
    height: 10px;
    float: left;
}
#THREE{
    display: inline-block;
    background-color: #088da5;
    position:relative;
    width: 50px;
    height: 50px;
}

Answer 1

请参阅带有 display: table; 和 display: table-cell;

的 jsfiddle

#FIVE{
    display: table;
    width: 100px;
}
#TWO {
    display: table-cell;
    background-color: #900;

    width: 50%;
    height: 10px;
}
#THREE{
    display: table-cell;
    background-color: #08a;

    width: 50%;
    height: 50px;
}

https://jsfiddle.net/sw_double/pepjxL2c/