3rd div doesn't touch the top because first and second are under eachother

Question

I don't think the title is a good one but I don't know how to say it in a better way.

I have 3 divs representing an image, user info, user experience.

Due to mobile responsiveness experience must come last, but with the code below the experience div doesn't touch the top.

.one{
 width: 40%;
 height: 50px;
 padding: 5px;
 background-color: #0f0;
}
.two{
 width: 40%;
 height: 70px;
 padding: 5px;
 background-color: #0ff;
 float: left;
}
.three{
 width: 56%;
 height: 100px;
 padding: 5px;
 background-color: #f00;
 float: right;
}
.four{
 width: 500px;
 padding: 5px;
 margin: 5px;
 background-color: #ff0;
 float: left;
}

<div class="four">
    <div class="one">1 image</div>
    <div class="two">2 info</div>
    <div class="three">3 experience</div>
</div>

How it should look like:

Answer 1

You can wrap the left hand side in a separate div and float that left.

.left {
  float: left;
    width: 40%;
}

.one {
  height: 50px;
  padding: 5px;
  background-color: #0f0;
}

.two {
  height: 70px;
  padding: 5px;
  background-color: #0ff;
}

.three {
 width: 58%;
  height: 100px;
  padding: 5px;
  background-color: #f00;
  float: right;
}

.four {
  width: 500px;
  padding: 5px;
  margin: 5px;
  background-color: #ff0;
  float: left;
}

<div class="four">
  <div class="left">
    <div class="one">1 image</div>
    <div class="two">2 info</div>
  </div>
  <div class="three">3 experience</div>
</div>

An alternative approach using flexbox:

.left {
  min-width: 40%;
}

.one {
  height: 50px;
  padding: 5px;
  background-color: #0f0;
}

.two {
  height: 70px;
  padding: 5px;
  background-color: #0ff;
}

.three {
  flex: 1;
  height: 100px;
  padding: 5px;
  background-color: #f00;
}

.four {
  width: 500px;
  padding: 5px;
  margin: 5px;
  background-color: #ff0;
  float: left;
  display: flex;
}

<div class="four">
  <div class="left">
    <div class="one">1 image</div>
    <div class="two">2 info</div>
  </div>
  <div class="three">3 experience</div>
</div>

Answer 2

Your 1st div(image) has a margin to the right so 3rd div(experience) won't fit in. So at first you have to wrap the 1st two div's into a container like the example below

<div class="four">
    <div class = "container">
       <div class="one">1 image</div>
       <div class="two">2 info</div>
    </div>  
    <div class="three">3 experience</div>
</div>

After that you will need to inline the container and set the width of container to 40% and first two div's to 100% like the CSS below.

.one{
    width: 100%; 
    height: 50px;
    padding: 5px;
    background-color: #0f0;
}
.container {
    display:inline-block;
    width:40%;  
 }
.two{
    width: 100%;
    height: 70px;
    padding: 5px;
    background-color: #0ff;
    float: left;
}
.three{
    width: 56%;
    height: 100px;
    padding: 5px;
    vertical-align: text-top;
    background-color: #f00;
    float: right;
 }
.four{
    width: 500px;
    padding: 5px;
    margin: 5px;
    background-color: #ff0;
    float: left;  
}

Here's it on Codepen and Jsfiddle

Answer 3

Wrap div's one and two in a div that sets the width and floats left, then float div three to the right.

Make div class one and two to 100% width so they fill the left div completely, and set the left div to the width you wanted.

HTML:

<div class="four">
    <div class="left">
        <div class="one">
            1 image
        </div>
        <div class="two">
            2 info
        </div>
    </div>
    <div class="three">
        3 experience
    </div>
</div>

CSS:

.one{
    height: 50px;
    padding: 5px;
    background-color: #0f0;
    display: block;
}
.two{
    height: 70px;
    padding: 5px;
    background-color: #0ff;
    display: block;
}
.three{
    width: 56%;
    height: 100px;
    padding: 5px;
    background-color: #f00;
    float: right;
    display: inline-block;
}

.left {
    float: left;
    display: block;
    width: 42%;
}
.four{
    width: 500px;
    padding: 5px;
    margin: 5px;
    background-color: #ff0;
    display: block;
    float: left;
}