image size using different media queries - html

Question

I have the following problem. I have a block split in two div's left and right, the left contain image with 640x461 and the right one split also in two div's
one contains text and beneath it an image 640x342. on the mobile site these are underneath each other image(640x461),text block then image(640x342), but given different screen size using media e.g #media (min-device-width: 568px) the right div(text+img) should float next to left div, but the problem is that the height of my left image still smaller than the height of right div. What should i do here?
HTML:
<div class="block_acc">
<div class="lp-bild-left">
<a>
<img src="640x461.jpg" />
</a>
</div>
<div class="lp_column">
<div class="lp_description">
<div class="lp_textbox_wrapper">
<span class="headline">text</span>
</div>
</div>
<div class="lp-bild-right">
<img src="640x342.jpg" />
</div>
</div>
</div>
CSS:
#media (min-device-width: 568px) {
.lp-bild-left{
float: left;
width: 50%;
}
.lp_column {
float: left;
width: 50%;
}
}

Answer 1

OK, check this code:
<div class="block_acc">
<div class="lp-bild-left">
<a href="#">
<img src="http://planeon.net/wp-content/uploads/hot-air-balloon.jpg" />
</a>
</div>
<div class="lp_column">
<div class="lp_description">
<div class="lp_textbox_wrapper">
<span class="headline">text</span>
</div>
</div>
<div class="lp-bild-right">
<img src="http://www.whudat.de/images/Albuquerque-Balloon-Fiesta_4.jpg" />
</div>
</div>
</div>
CSS...
.block_acc {
display: block;
overflow: hidden;
}
#media (min-device-width: 568px) {
.lp-bild-left {
float: left;
width: 50%;
}
.lp-bild-left img {
height: auto;
width: 100%;
}
.lp_column {
float: left;
width: 50%;
}
.lp_column .lp-bild-right {
max-width: 100%;
}
.lp_column .lp_textbox_wrapper {
line-height: 0;
}
.lp_column .lp_textbox_wrapper .headline {
font-size: 1vw;
line-height: normal;
}
.lp_column .lp-bild-right img {
width: 130%;
}
}
https://fiddle.jshell.net/jonathanzuniga/at57emmd/