Css Two Divs Next to Each Other

How to place two divs next to each other?

Float one or both inner divs.

Floating one div:

#wrapper {
    width: 500px;
    border: 1px solid black;
    overflow: hidden; /* will contain if #first is longer than #second */
}
#first {
    width: 300px;
    float:left; /* add this */
    border: 1px solid red;
}
#second {
    border: 1px solid green;
    overflow: hidden; /* if you don't want #second to wrap below #first */
}

or if you float both, you'll need to encourage the wrapper div to contain both the floated children, or it will think it's empty and not put the border around them

Floating both divs:

#wrapper {
    width: 500px;
    border: 1px solid black;
    overflow: hidden; /* add this to contain floated children */
}
#first {
    width: 300px;
    float:left; /* add this */
    border: 1px solid red;
}
#second {
    border: 1px solid green;
    float: left; /* add this */
}

CSS two divs next to each other

You can use flexbox to lay out your items:

#parent {  display: flex;}#narrow {  width: 200px;  background: lightblue;  /* Just so it's visible */}#wide {  flex: 1;  /* Grow to rest of container */  background: lightgreen;  /* Just so it's visible */}

<div id="parent">  <div id="wide">Wide (rest of width)</div>  <div id="narrow">Narrow (200px)</div></div>

#video{

    width: 50%;
    height: 100%;
    border-style: solid;
    float: left;
    box-sizing: border-box;
}
#chat{

    width: 50%;
    height: 100%;
    border-style: solid;
    float: left;
    box-sizing: border-box;
}

div{
  border: 1px solid;
  display: inline-block;
  box-sizing: border-box;
  width: 50%;
}

<form>
  <div>
    two
  </div><!-- you need to remove space here --><div>
    one
  </div>
</form>

* {  box-sizing: border-box;}#wrapper {  border: 1px solid blue;}#div1 {  display: inline-block;  width: 50%;  height: 120px;  border: 1px solid red;}#div2 {  display: inline-block;  width: 50%;  height: 160px;  border: 1px solid green;}

<div id="wrapper">  <div id="div1">The two divs are</div><div id="div2">next to each other.</div></div>