I am trying to place 2 divs with different height next to each other horizontally that are in a div. With my code, the second div box stays at the bottom of the first div square.

box's width and height are set BUT with square div, height and width are not set and I don't want to set it.

With this condition, how do achieve the result that I want? and If this cannot be done with CSS, using Jquery is fine as well.

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

I am trying to place 2 divs with different height next to each other horizontally that are in a div. With my code, the second div box stays at the bottom of the first div square.

box's width and height are set BUT with square div, height and width are not set and I don't want to set it.

With this condition, how do achieve the result that I want? and If this cannot be done with CSS, using Jquery is fine as well.

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

• javascript
• jquery
• html
• css

• try to remove /* float: right; / / display: inline-block; */ from div with id box – knizer Commented Jul 16, 2017 at 5:43

4 Answers 4

Try this with flexbox.

JSfiddle. CanIUse.

#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>

You can use flexbox. Remove your floats and inline blocks. Wrap the boxes with display:flex. This makes immediate children flexible along the plane specified (flex-direction: row). Specify the box that shrinks as flex:1.

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

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

#box {
  border: 1px solid red;
  flex: 1;
}

https://jsfiddle/nj163q24/

There are a couple of ways to do this. If you change your html slightly, you can do something like this:

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

#square {
  position: absolute;
  top: 0;
  left: 0;
  width: 50px;
  height: 50px;
    border: 1px solid blue;

}

#box {
  border: 1px solid red;
  position: relative;
    top: 0;
  padding-left: 65px;
}

<div id="wrapper">

  <div id="box">
  <div id="square"></div>
  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>

Just Edit #box like :

#box {
  border: 1px solid red;
  float: right;<---------Remove
  display: inline-block;<---------Remove
  margin-left: 50px; <---------Added
}

* {
  box-sizing: border-box;
}
#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;
  margin-left: 50px;
} 

<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 textVery 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>