CodePen

HTML

            
              <div class="wrapper">
  
  <div class="left">
    asdsadadadaadad
    <br />
    asdas
    asdasd<br />
    asdasdas
        <br />
    asdas
    asdasd<br />
    asdasdas
        <br />
    asdas
    asdasd<br />
    asdasdas
    
  </div>
  
  <hr />
  
  <div class="right">
    asdas
    asdasd<br />
    asdasdas
        <br />
    asdas
    asdasd<br />
    asdasdas
        <br />
    asdas
    asdasd<br />
    asdasdas
  </div>
</div>
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              * {
  box-sizing:border-box;
  margin:0;
  padding:0;
}

.wrapper {
  width: 350px;
  margin: 25px auto;
  border: 1px solid green;
  overflow: hidden; /* quick clearfix */
  padding:10px;
}

.left, .right {
  width:160px;
  height:auto;
  border:1px solid grey;
  float:left;
}
.right {
  float: right;
}

hr {
  display: inline-block;
  float: left;
  background: red;
  border: 0;
  width: 1px;
  height: auto;
  margin: 0 10px;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................