html - put two divs next to each other -

i trying position 2 divs next each other. html

<div id="status">   <div id ="wrapleft">     <input type="text" placeholder="username"/>     <input type="password" placeholder="password"/>   </div>   <div id ="wrapright">     <input type="text" placeholder="url"/>     <input type="text" placeholder="url"/>   </div>   <div id="clear"></div> </div> 

css

  body {     font-family: "segoe ui", "lucida grande", tahoma, sans-serif;     font-size: 100%;   }      #status {     /* avoid excessively wide status text */     white-space: pre;     text-overflow: ellipsis;     overflow: hidden;     width: 600px   }   input{     width:100px;     height:25px;     border-top:0px;     border-left: 0px;     border-right: 0px;     outline: none;   }   #wrapleft{     position: relative;     width: 30%;     height: 100%;     background: black;     float: left   }   #wrapright{     position: relative;     width: 65%;     height: 100%;     background: red;     float: right;   }   #clear{     clear:both;   } 

yet somehow divs arent on same level, right 1 below left one. how fix this? tried using left , right float doesnt align should. cause this?example

thanks help

use display:flex main div.

also @ css, have removed of css.

body {      font-family: "segoe ui", "lucida grande", tahoma, sans-serif;      font-size: 100%;    }      #status {      /* avoid excessively wide status text */      white-space: pre;      text-overflow: ellipsis;      overflow: hidden;    }        #status{    width:100%;    display:flex;  /* it's important */     }    input{      width:100px;      height:25px;      border-top:0px;      border-left: 0px;      border-right: 0px;      outline: none;    }    #wrapleft{      width: 30%;      height: 100%;      background: black;      }    #wrapright{      width: 70%;      height: 100%;      background: red;    }   

<div id="status">    <div id ="wrapleft">      <input type="text" placeholder="username"/>      <input type="password" placeholder="password"/>    </div>    <div id ="wrapright">      <input type="text" placeholder="url"/>      <input type="text" placeholder="url"/>    </div>    <div id="clear"></div>  </div>