Make image with wrapping content responsive

Question

I need to create an image with some info next to it, the info is like a name, university and a follow button, just exactly like this demo

How to create this structure without getting a problem while resizing the browser, assuming it takes up 20% of a section width?

html:

<section id="some-section">
            <div class="wrapper">
                <div id="img-container">
                    <img src="avatar.png" alt="herp_image">
                </div>
                <div id="hero_details">
                    <h2>John Doe</h2>
                    <span>Professor</span>
                    <span>Neuroscience</span>
                    <span>University of Oxford</span>
                    <div id="Contact">
                        <a href="#">Follow</a>
                        <a href="#">Message</a>
                    </div>

                </div>     
            </div>
        </section>

CSS:

img {
    max-width: 100%;
    max-height: 100%;
}

* {
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;
}

#some-section {
    background: #eee;
    font-family: 'Open Sans', sans-serif;
}

.wrapper {
    display: flex;
    flex-wrap: wrap;
    width: 20%;
    padding: 10px;
    background: lightgreen;
    line-height: 1.5;
    font-size: 0.9em;
}

#img-container {
    width: 100px;
    height: 200px;
    max-width: 60%;
    max-height: 80%;
    margin-right: 5px;
}

#hero_details {
    max-width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-bottom: auto;
}

#hero_details span {
    font-size: 0.85em; 
}


#hero_details h2 {
    margin-bottom: 0.5em;
}

This code aligns items correctly just before resizing the browser to lower width but seems very verbose and not efficient in the term of responsiveness as I see.

Answer 1

After i Checked the Solution of @Shavran, I have modified it a little to achieve the maximum benefit of it and this is the final code:

html:

  <section id="some-section">
    <div class="wrapper">
      <div class="img-container">
        <img src="https://via.placeholder.com/200x300" alt="herp_image">
      </div>
      <div class="hero_details">  
        <h2>John Doe</h2>
        <div class="hero_details_inner">       
          <p>Professor</p>
          <p>Senior Group Leader and professor of surgical Oncology</p>
          <p>University of Oxford</p>
       </div>
       <div class="contact">
         <a class="btn-flow" href="#">Follow</a>
         <a href="#">Message</a>
       </div>
     </div>
   </div>
  </section>

CSS:

img {
    max-width: 100%;
}
* {
    margin: 0;
    padding: 0;
    box-sizing:border-box;
}
a {
    text-decoration: none;
}

.wrapper {
    display: flex;
    font-size: calc(11px + 0.4vw);
}
.hero_details {
    display: flex;
    flex-wrap: wrap;
    padding: 0 0 0 10px;
}
.hero_details_inner {
    width: 100%;
    align-items: flex-start;
}

.hero_details_inner p{
    margin-bottom: 0.5em;
    line-height: 2;
}
.hero_details .contact {
    display: flex;
    align-items: flex-end;
}
.wrapper .contact .btn-flow {
    display: inline-block;
    color: #000;
    border: 1px solid #333;
    padding: 3px 4px;
    border-radius: 3px;
}
.wrapper .contact a {
    margin: 0 6px 0 0;
}

Answer 2

Just try this. The image and content section will be equal column height as per your reference image. I hope this solution will be helpful.

img {
    max-width: 100%;
}
* {
    margin: 0;
    padding: 0;
	box-sizing:border-box;
}
a {
    text-decoration: none;
}

.wrapper {
    display: flex;
}
.hero_details {
    display: flex;
    flex-wrap: wrap;
    padding: 0 0 0 10px;
}
.hero_details_inner {
    width: 100%;
    align-items: flex-start;
}
.hero_details .contact {
    display: flex;
    align-items: flex-end;
}
.wrapper .contact .btn-flow {
    display: inline-block;
    color: #000;
    border: 1px solid #333;
    padding: 3px 4px;
    border-radius: 3px;
}
.wrapper .contact a {
    margin: 0 6px 0 0;
}

<section id="some-section">
    <div class="wrapper">
        <div class="img-container">
            <img src="https://via.placeholder.com/200x300" alt="herp_image">
        </div>
        <div class="hero_details">
            <div class="hero_details_inner">
                <h2>John Doe</h2>
                <p>Professor</p>
                <p>Senior Group Leader and professor of surgical Oncology</p>
                <p>University of Oxford</p>
            </div>
            <div class="contact">
                <a class="btn-flow" href="#">Follow</a>
                <a href="#">Message</a>
            </div>
        </div>
    </div>
</section>

Answer 3

An alternative solution:

.container .img {
  text-align: center;
}

.container .details {
  border-left: 3px solid #ded4da;
}

.container .details p {
  font-size: 15px;
  font-weight: bold;
  text-align: left;
  word-break: keep-all;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-sm-4 col-md-4 img">
      <img src="http://placehold.it/150x200/CCCCCC&text=Image" alt="" class="img-rounded"> </div>
    <div class="col-sm-6 col-md-4 details">
      <blockquote>
        <h5>John Doe</h5>
        <small>professor</small>
      </blockquote>
      <p>Senior Group Leader and professor of surgical Oncology University Of Oxford</p>
      <div>
        <button type="button" class="btn btn-outline-secondary">Follow</button>
        <button type="button" class="btn">Message</button>
      </div>
    </div>
  </div>
</div>