<!-- https://www.sitepoint.com/community/t/css-test-your-css-skills-number-42-float-center-revisited/18797/27 -->

<div class="wrap">
  <div class="col1">
    <img class="img" src="https://picsum.photos/400/400" width="400" height="400" alt="Centred Image">
    <div class="inner">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ultrices felis et neque egestas suscipit. Donec tortor odio, pulvinar non tristique ac imperdiet sed libero. Nulla facilisi. Integer nisi nulla, consectetur auctor laoreet sed, gravida
        non nulla. Cras volutpat aliquet volutpat. Sed ligula nibh, feugiat at sollicitudin sit amet, dignissim eget velit. Aenean consectetur aliquam urna, non mattis risus dictum ac. In hac habitasse platea dictumst. Sed ac magna metus. Nulla facilisi.
        Integer nisi nulla, consectetur auctor laoreet sed, gravida non nulla. Cras volutpat aliquet volutpat. Sed ligula nibh, feugiat at sollicitudin sit amet, dignissim eget velit. Aenean consectetur aliquam urna, non mattis risus dictum ac. In hac
        habitasse platea dictumst. Sed ac magna metus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ultrices felis et neque egestas suscipit. Donec tortor odio, pul vinar non tristique ac, imperdiet sed libero. Nulla facilisi. Integer
        nisi nulla, consectetur auctor laoreet sed, gravida non nulla. Cras volutpat aliquet volutpat. Sed ligula nibh, feugiat at sollicitudin sit amet, dignissim eget velit. Aenean consectetur aliquam urna, non mattis risus dictum ac. In hac habitasse
        platea dictumst. Sed ac magna metus.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ultrices felis et neque egestas suscipit. Donec tortor odio, pulvinar non tristique ac imperdiet sed libero. Nulla facilisi. Integer nisi nulla, consectetur
        auctor laoreet sed, gravida non nulla. Cras volutpat aliquet volutpat. Sed ligula nibh, feugiat at sollicitudin sit amet, dignissim eget velit. Aenean consectetur aliquam urna, non mattis risus dictum ac. In hac habitasse platea dictumst. Sed
        ac magna metus. Nulla facilisi. Integer nisi nulla, consectetur auctor laoreet sed, gravida non nulla. Cras volutpat aliquet volutpat. Sed ligula nibh, feugiat at sollicitudin sit amet, dignissim eget velit. Aenean consectetur aliquam urna, non
        mattis risus dictum ac. In hac habitasse. Integer nisi nulla, consectetur auctor laoreet sed, gravida non nulla. Cras volutpat aliquet volutpat. Sed ligula nibh, feugiat at sollicitudin sit amet, dignissim eget velit. Aenean consectetur aliquam
        urna, non mattis risus dictum ac. In hac habitasse. Integer nisi nulla, consectetur auctor laoreet sed, gravida non nulla. Cras volutpat aliquet volutpat. Sed ligula nibh, feugiat at sollicitudin sit amet, dignissim eget velit. Aenean consectetur
        aliquam urna, non mattis risus dictum ac. In hac habitasse</p>
    </div>
  </div>
  <div class="col2">
    <div class="img"></div>
    <div class="inner">
      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus viverra erat quis massa hendrerit vestibulum. Donec laoreet convallis egestas. Pellentesque habitant morbi tristique senectus et netus et malesuada
        fames ac turpis egestas. Aliquam erat volutpat. Praesent posuere scelerisque euismod. Etiam ante justo, euismod quis feugiat ut, ullamcorper sit amet ligula. Donec congue odio eget nunc tincidunt nec vehicula mauris tincidunt. Integer ac pellentesque
        arcu. Vivamus ipsum sapien, auctor eu ornare ac, feugiat lobortis lectus. Nulla facilisi. Integer nisi nulla, consectetur auctor laoreet sed, gravida non nulla. Cras volutpat aliquet volutpat. Sed ligula nibh, feugiat at sollicitudin sit amet,
        dignissim eget velit. Aenean consectetur aliquam urna, non mattis risus dictum ac. In hac habitasse platea dictumst. Sed ac magna metus. Pellentesque habitantxx morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus viverra
        erat quis massa hendrerit vestibulum. Donec laoreet convallis egestas. Pellentesque habitantxxx morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam erat volutpat. Praesent posuere scelerisque euismod. Etiam ante justo,
        euismod quis feugiat ut, ullamcorper sit amet ligula. Donec congue odio eget nunc tincidunt nec vehicula mauris tincidunt. Integer ac pellentesque arcu. Vivamus ipsum sapien, auctor eu ornare ac, feugiat lobortis lectus. Lorem ipsum dolor sit
        amet, consectetur adipiscing elit. Nam ultrices felis et neque egestas suscipit. Donec tortor odio, pulvinar non tristique ac imperdiet sed libero. Nulla facilisi. Integer nisi nulla, consectetur auctor laoreet sed, gravida non nulla. Cras volutpat
        aliquet volutpat. Sed ligula nibh, feugiat at sollicitudin sit amet, dignissim eget velit. Aenean consectetur aliquam urna, non mattis risus dictum ac. In hac habitasse platea dictumst. Sed ac magna metus. Nulla facilisi. Integer nisi nulla, consectetur
        auctor laoreet sed, gravida non nulla. Cras volutpat aliquet volutpat. Sed ligula nibh, feugiat at sollicitudin sit amet, dignissim eget velit. Aenean consectetur aliquam urna, non mattis risus dictum ac. In hac habitasse gravida non nulla. Cras
        volutpat aliquet volutpat. Sed ligula nibh, feugiat at sollicitudin sit amet, dignissim eget velit. Aenean consectetur aliquam urna, non mattis risus dictum ac. In hac habitasse platea dictumst. Sed ac magna metus. Nulla facilisi. </p>
    </div>
  </div>
</div>

body {
  background: #ccc;
}
.wrap {
  max-width: 1280px;
  margin: auto;
  overflow: hidden;
  border: 5px solid #000;
  background: #efefef;
  border-spacing: 10px;
  position: relative;
  display: flex;
}
.col1,
.col2 {
  padding: 10px;
  text-align: justify;
  width: calc(50% + 220px);
}
p {
  padding: 5px;
  margin: 0 0 1em;
}
.col1:before,
.col2:before {
  float: right;
  width: 1px;
  height: 90px;
  content: " ";
}
.col2:before {
  float: left;
}
.img {
  float: right;
  clear: right;
  margin: 20px 0 20px 20px;
  border-radius: 50%;
  border: 10px solid #fff;
  shape-outside: circle(50%);
  opacity: 0;
  width: 150px;
  height: 400px;
  animation: fadeIn 4s forwards;
}
@keyframes fadeIn {
  50% {
    width: 380px;
    opacity: 0;
  }
  100% {
    opacity: 1;
    width: 400px;
  }
}
.col2 .img {
  float: left;
  margin: 20px 20px 20px 0;
  clear: left;
}
.col1 .inner {
  margin-right: 220px;
}
.col2 .inner {
  margin-left: 220px;
}
.col2 {
  margin-left: -440px;
}

@media screen and (max-width: 800px) {
  .wrap {
    display: block;
  }
  .col2:before {
    display: none;
  }
  .col1,
  .col2,
  .col1 .inner,
  .col2 .inner {
    width: auto;
    margin: 0;
  }
  .col2 .img {
    display: none;
  }
  .img {
    width: 50%;
    height: auto;
    min-width: 100px;
    animation: scaleDown 1s forwards;
  }
  @keyframes scaleDown {
    100% {
      width: 50%;
	  height:auto;
      opacity:1;
    }
  }
}

@media screen and (max-width: 480px) {
  .col1:before {
    display: none;
  }
}