3个固定高度的列填充固定包装div

Question

我有一个包含3列（<div class="large"> s）的包装器<div>。包含包装<div>的所有<div class="large">都具有固定的高度和宽度。

我的问题是，当我开始用不同的内容填充这3列时，它们往往会根据其内容向下移动。

如果这些列在包装器<div class="large">内保留默认位置，无论它们包含什么内容，我该怎么做？

这是我的Codepen：https://codepen.io/anon/pen/Qapapx

＆＃13;

＆＃13;

.large {
  border: 1px dashed;
  width: 1024px;
  height: 250px;
  margin: 0 auto;
  text-align: center;
  position: relative;
}

.side {
  width: 300px;
  height: 220px;
  border: 1px dashed blue;
  display: inline-block;
}

.main {
  width: 342px;
  height: 250px;
  border: 1px dashed orange;
  display: inline-block;
}

＆＃13;

<div class="large">
  <div class="side">
    efsdfvsdf
  </div>
  <div class="main">
    dsfgfdsdfsdffds<br> sdddsds
    <br> dsssdfsdsdds
  </div>
  <div class="side">
    sdfsdffds<br> sdfads
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;