не получается класс frame, frame2, frame3 поставить в ряд

.our-content {
  padding-top: 60px;
  padding-left: 30px;
}

.frame {
  width: 170px;
  height: 250px;
  border: 3px solid #ccc;
  background: white;
  margin-left: 30px;
  margin-top: 50px;
  flex-direction: row;
}

p {
  color: white;
  padding-top: 8px;
}

.cta {
  display: inline-block;
  padding: 5px 20px;
  margin-left: 19px;
  margin-top: 80px;
  border-radius: 0.5em;
  background-color: orange;
  color: white;
  border: 2px solid orange;
}

.img {
  display: inline-block;
  margin-left: 55px;
  margin-top: 60px;
}

.sys {
  padding-top: 60px;
  padding-left: 30px;
}

.frame2 {
  width: 170px;
  height: 250px;
  border: 3px solid #ccc;
  background: white;
  margin-left: 300px;
  margin-top: 0px;
}

.frame3 {
  width: 170px;
  height: 250px;
  border: 3px solid #ccc;
  background: white;
  margin-left: 200px;
  margin-top: 50px;
}

</div>
<div class="frame">

  <a href="#"><img class="img" src="https://img.icons8.com/emoji/50/000000/plus-emoji.png" /></a>
  <button class="cta">Add images</button>

  <div class="frame2">
    <p>Hello World!</p>
  </div>

  <div class="frame3">
    <p>Hello World!</p>
  </div>

</div>