Q:

Stuck with Responsive Height of an HTML block

I'm stuck with adjusting the height of my block in relation to the amount of text inside it. On desktops it works fine, but on my iPhone the text goes over the div with the violet background.

Life demo: https://www.ruslanchik.ru/en/. To reproduce the problem, you may use your mobile device.

  

 .section-with-personal-photo {
    width: 100%;
    height: 100%;
    min-height: 360px;
    background-image: linear-gradient(126deg, rgb(92, 52, 116)40%, rgb(142, 102, 206)100%)
}

.section-with-personal-photo-image {
    padding: 0;
    display: block;
    float: left;
    clear: left;
    content: url("//res.cloudinary.com/ruslanchik/image/upload/c_scale,h_360/v1525190031/ruslanchik.ru/i/avatars/LinkedIn-photo-shooting-session-05.04.2018.png")
}

.section-with-personal-photo-text {
    height: 100%;
    max-width: 68%;
    float: right;
    color: #ffffff
}
<div class=section-with-personal-photo>
  <div class=section-with-personal-photo-image></div>
  <div class=section-with-personal-photo-text>
    <h3 id=resume>CV</h3>
    <p>I will tailor it to your specific vacancy and do a keyword opimisation.</p>
    <ul class=dotted-list>
      <li><a href=//www.ruslanchik.ru/en/cv/professional/ title="Ruslan Seletskiy's Professional CV" target=_blank>Professional CV</a></li>
      <li><a href=//www.ruslanchik.ru/en/cv/academic/ title="Ruslan Seletskiy's Academic CV" target=_blank>Academic CV</a> <span> featuring with a long appendix</span></li>
    </ul>
    <p id=make-an-offer>Let me know about some opportunities available at your organisation:
      <ul class=dotted-list>
        <li><a href="mailto:ruslanchik@ruslanchik.ru?subject=Available%20career%20opportunities%20at%20<Organisation name>" title="Send an email to ruslanchik@ruslanchik.ru">ruslanchik@ruslanchik.ru</a></li>
        <li><a href="mailto:ruslan.seletskiy@gmail.com?subject=Available%20career%20opportunities%20at%20<Organisation name>" title="Send an email to ruslan.seletskiy@gmail.com">ruslan.seletskiy@gmail.com</a> <span> if you think my domain email is unprofessional</span></li>
      </ul>
  </div>
</div>

I've checked various posts on Stackoverflow, but solutions from many of them didn't work. For all the rest, solutions (e.g. how do I give a div a responsive height) made the layout even worse.
Any relevant help is highly appreciated.

A:

You can also remove float and max-width from your 'section-with-personal-photo-text' class. 
Then add 32% padding to your 'section-with-personal-photo'. This results in the div expanding like so: 

note (the image you have doesn't appear because the cloudinary domain is blocked on my network for some reason but, it should still work)

