CodePen

HTML

            
              <div class="wrapper clearfix">
  <div class="block">
    PROFILE (height min wil be 100px)<br />
    PROFILE<br />
    PROFILE<br />
    PROFILE<br />
    PROFILE<br />
    PROFILE<br />
    PROFILE<br />
  </div>
  
  <div class="block2">
    <div class="hr">
      <div class="block15">
      text text text text text text text text text      text text text text text text text text text      text text text text text text text text text      text text text text text text text text text      text text text text text text text text text      text text text text text text text text text      text text text text text text text text text      text text text text text text text text text      text text text text text text text text text      text text text text text text text text text
              text text text text text text text text text      text text text text text text text text text      text text text text text text text text text      text text text text text text text text text      text text text text text text text text text      text text text text text text text text text      text text text text text text text text text      text text text text text text text text text      

      </div>
     </div>
  </div>
</div>
            
          
!

CSS

            
              .wrapper {
  width: 800px;
  height: auto;
  border: 1px solid black;
  padding: 0 5px;
}

.block {
  width: 300px;
  float: left;
}

.block2 {
  float: left;
  width: 500px;
}

.hr {
  min-height: 100px;
  height: auto;
  max-height: auto;
  width: 1px;
  display: block;
  background-image: -webkit-linear-gradient( rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); 
 background-image:    -moz-linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); 
    background-image:     -ms-linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); 
    background-image:      -o-linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); 
  margin-right: 10px;
}
.block15 {
  width: 489px;
  margin-left: 10px;
}


* html .clearfix {
	height: 1%;
}
.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
.clearfix {
	display: inline-block;
}
            
          
!

JS

            
              
            
          
!
999px
Loading ..................