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;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

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