CSS水平对齐两个不同高度的div

Question

我试图在div中水平放置两个不同高度的div.使用我的代码,第二个div box保持在第一个div的底部square.

box设置宽度和高度但是square没有设置div,高度和宽度,我不想设置它.

有了这个条件,怎么做到我想要的结果呢？如果使用CSS无法做到这一点,那么使用Jquery也是可以的.

HTML

<div id="wrapper">
  <div id="square"></div>
  <div id="box">Very long text Very long text Very long text Very long text Very long text Very long text Very long text Very long text Very long text Very long text Very long text Very long text Very long text Very long text Very long text Very long text</div>
</div>

CSS

#wrapper {
  display: inline-block;
  border: 1px solid black;
}

#square {
  float: left;
  width: 50px;
  height: 50px;
  border: 1px solid blue;
  display: inline-block;
}

#box {
  border: 1px solid red;
  float: right;
  display: inline-block;
}

DEMO

的jsfiddle

Answer 1

尝试使用flexbox.

JSfiddle.CanIUse.com

#wrapper {
  border: 1px solid black;
  display: flex;
}

#square {
  min-width: 50px;
  height: 50px;
  border: 1px solid blue;
}

#box {
  border: 1px solid red;
}

<div id="wrapper">
  <div id="square"></div>
  <div id="box">Very long text Very long text Very long text Very long text Very long text Very long text Very long text Very long text Very long text Very long text Very long text Very long text Very long text Very long text Very long text Very long text Very long text Very long text Very long text Very long text Very long text Very long text Very long text Very long text Very long text Very long text Very long text Very long text Very long text Very long text Very long text Very long text </div>
</div>