@import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic);
html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}
body {
  font-family: lato;
}
.section-header, .steps-header, .steps-name {
  color: #3498db;
  font-weight: 400;
  font-size: 1.4em;
}
.steps-header {
  margin-bottom: 20px;
  text-align: center;
}
.steps-timeline {
  outline: 1px dashed rgba(255, 0, 0, 0);
}
.step-box {
    position: relative;
}
.border-info {
    position: absolute;
    top: -12px;
    right: -41%;
}
@media screen and (max-width: 500px) {
  .steps-timeline {
    border-left: 2px solid #3498db;
    margin-left: 25px;
  }
}
@media screen and (min-width: 500px) {
  .steps-timeline {
    border-top: 2px solid #3498db;
    padding-top: 20px;
    margin-top: 40px;
    margin-left: 16.65%;
    margin-right: 16.65%;
  }
}
.steps-timeline:after {
  content: "";
  display: table;
  clear: both;
}
.steps-one, .steps-two, .steps-three {
  outline: 1px dashed rgba(0, 128, 0, 0);
}
@media screen and (max-width: 500px) {
  .steps-one, .steps-two, .steps-three {
    margin-left: -25px;
  }
}
@media screen and (min-width: 500px) {
  .steps-one, .steps-two, .steps-three {
    float: left;
    width: 33%;
    margin-top: -50px;
  }
}
@media screen and (max-width: 500px) {
  .steps-one, .steps-two {
    padding-bottom: 40px;
  }
}
@media screen and (min-width: 500px) {
  .steps-one {
    margin-left: -16.65%;
    margin-right: 16.65%;
  }
}
@media screen and (max-width: 500px) {
  .steps-three {
    margin-bottom: -100%;
  }
}
@media screen and (min-width: 500px) {
  .steps-three {
    margin-left: 16.65%;
    margin-right: -16.65%;
  }
}
.steps-img {
  display: block;
  margin: auto;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 2px solid #3498db;
}
@media screen and (max-width: 500px) {
  .steps-img {
    float: left;
    margin-right: 20px;
  }
}
.steps-name, .steps-description {
  margin: 0;
}
@media screen and (min-width: 500px) {
  .steps-name {
    text-align: center;
  }
}
 steps-description {
  overflow: hidden;
}
@media screen and (min-width: 500px) {
  steps-description {
    text-align: center;
  }
}

  <!-- STEPS -->
  <section id="Steps" class="steps-section">

    
        <div class="steps-timeline">
    
          <div class="steps-one step-box">
            <img class="steps-img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTyznUM3fo7JW5RskOyxZqC0sGMtn6AdNB8Y3lVey8cdfl0ZnmW" alt="" />
            <h3 class="steps-name">
              Jane Smith
            </h3>
            <p class="steps-description">
                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. It has been the industry's standard dummy text ever since the 1500s.
            </p>
            <div class="border-info">
                <p>Valued Client</p>
            </div>
          </div>
    
          <div class="steps-two step-box">
            <img class="steps-img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTyznUM3fo7JW5RskOyxZqC0sGMtn6AdNB8Y3lVey8cdfl0ZnmW" alt="" />
            <h3 class="steps-name">
                    Jane Smith
            </h3>
            <p class="steps-description">
                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. It has been the industry's standard dummy text ever since the 1500s.
            </p>
            <div class="border-info">
                    <p>Valued Client</p>
                </div>
          </div>
    
          <div class="steps-three step-box">
            <img class="steps-img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTyznUM3fo7JW5RskOyxZqC0sGMtn6AdNB8Y3lVey8cdfl0ZnmW" alt="" />
            <h3 class="steps-name">
                    Jane Smith
            </h3>
            <p class="steps-description">
                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. It has been the industry's standard dummy text ever since the 1500s.
            </p>
          </div>
    
        </div><!-- /.steps-timeline -->
    
      </section>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
#dotted::after{
          content: "------------------------------";
          letter-spacing: 2px;
          color:#2518A5;
}
</style>

<div class="col mini-box ml-4" >
                  <div class="row" style="position: relative !important; width: 1000px;">
                    <div style="display: inline">
                        <div id="dotted"><img class="rounded pull-right" src="assets/ic_AvatarMale_2.svg" width="85" height="85"></img>
                        </div>  
                        <div class="mt-2 text-left"><h6 style="font-weight: 700; color: #2518A5 ">John Doe (You)</h6>
                        <h6>Founder</h6>
                        <h6>ESOP International</h6>
                        </div>
                    </div>
                  <span style="text-align: center; font-size:10pt;position: absolute; right:750px; top: 10px; display: inline-block">Your Company</span>
    <span style="position: absolute;text-align: center; font-size:10pt; right:370px; display: inline-block">Nathan was co founder &  <br/>COO at HotelsByDay</span>
                <div style="display: inline-block">
                        <div id="dotted"><img class="rounded pull-right" src="assets/ic_AvatarMale_1.svg" width="85" height="85"></img>
                        </div>   
                        
                        <div class="mt-2 "><h6 style="font-weight: 700; color: #2518A5 ">Paul Ironside</h6>
                          <h6>Co-founder and CEO</h6>
                          <h6>Commercial Tribe</h6>
                        </div>
                    </div>
                    <img class="rounded pull-right" src="assets/ic_AvatarMale_1.svg" width="85" height="85">
                </div>
              </div>