<div id="wrap">

  <div class="circle">
    <div class="circle__txt circle__txt--r" id="txt-01"><span>Some text 01</span></div>
    <div class="circle__txt circle__txt--r" id="txt-02"><span>Some text 02</span></div>
    <div class="circle__txt circle__txt--r" id="txt-03"><span>Some text 03</span></div>
    <div class="circle__txt circle__txt--l" id="txt-04"><span>Some text 04</span></div>
    <div class="circle__txt circle__txt--l" id="txt-05"><span>Some text 05</span></div>
    <div class="circle__txt circle__txt--l" id="txt-06"><span>Some text 06</span></div>
    <div class="circle__txt circle__txt--c" id="txt-07"><span>Some text 07</span></div>
    <div class="circle__img"><img src="http://cdn.onlinewebfonts.com/svg/img_555739.png" alt=""></div>
  </div>

</div>
html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background-color: #fff;
  color: #000;
  font-size: 18px;
  font-family: monospace;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  outline: none;
}

#wrap {
  width: 100%;
  padding: 20px;
}

.circle {
  width: 100%;
  max-width: 980px;
  margin: auto;
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-areas:
    'txt-area-01 img-area-01 txt-area-04'
    'txt-area-02 img-area-01 txt-area-05'
    'txt-area-03 img-area-01 txt-area-06'
    'txt-area-07 txt-area-07 txt-area-07';

  &__img {
    grid-area: img-area-01;
    
    img {
      width: 100%;
    }
  }
  
  &__txt {
    margin-top: 2vw;
    
    &#txt-01 {
      grid-area: txt-area-01;
      margin-right: -3vw;
    }
    
    &#txt-02 {
      grid-area: txt-area-02;
      margin-right: 3vw;
    }
    
    &#txt-03 {
      grid-area: txt-area-03;
    }
    
    &#txt-04 {
      grid-area: txt-area-04;
      margin-left: -3vw;
    }
    
    &#txt-05 {
      grid-area: txt-area-05;
      margin-left: 3vw;
    }
    
    &#txt-06 {
      grid-area: txt-area-06;
    }
    
    &#txt-07 {
      grid-area: txt-area-07;
    }
    
    &--r {
      text-align: right;
    }
    
    &--l {
      text-align: left;
    }
    
    &--c {
      text-align: center;
    }
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js