All the text appears on the top between divs

Question

I want to make the Akita Inu and Cockapoo labels just above box-left divs but instead most of the labels just stacked in the middle between divs. I tried to put two divs in one div like but it didn't work.

.box-left {
  clear: all;
  float: left;
  border: 1px solid black;
  width: 600px;
  height: 250px;
  margin-top: 15px;
  margin-bottom: 15px;
}

.box-right {
  float: right;
  border: 1px solid black;
  width: 600px;
  height: 250px;
  margin-top: 15px;
  margin-bottom: 15px;
}

  <div class="label">Akita Inu</div>
  <div class="box-left"></div>
  <div class="box-right"></div>

  
  <div class="label">Cockapoo</div>
  <div class="box-left"></div>
  <div class="box-right"></div>

  <div class="label">Corgi</div>
  <div class="box-left"></div>
  <div class="box-right"></div>

  <div class="label">Shiba Inu</div>
  <div class="box-left"></div>
  <div class="box-right"></div>

Answer 1

.box-container{
  display:flex;
  justify-content: space-between;
  min-width: 600px;
  min-height: 200px;
}
.box {
  width: 300px;
  height: 200px;
  margin-top: 15px;
  margin-bottom: 15px;
  border: 2px solid black;

}

 <div class="label">Akita Inu</div>
 <div class="box-container">
  <div class="box"></div>
  <div class="box"></div>
</div>
  
  <div class="label">Cockapoo</div>
 <div class="box-container">
  <div class="box"></div>
  <div class="box"></div>
</div>

If I understand what you're about to do, I think it will work very well with the style change.