Align Divs according to class

Question

I have a div father with several divs son inside.
And I would like the Divs with the blue class to be on the right and the white class to be on the left. But next to each other, as in a row.
Setting the class to float left and right is a gap between.

.pai{
  width: 300px;
  border: 1px solid black;
  height: 50px;
}
.filho{
  width: 40px;
  margin: 2px;
  border: 1px solid black;
}
.azul{
  float:left;
  background-color: blue;
}
.branco{
  float:right;
  background-color: white;
}

<div class='pai'>
   <div class='filho azul'>texto</div>
   <div class='filho branco'>texto</div>
   <div class='filho azul'>texto</div>
   <div class='filho azul'>texto</div>
   <div class='filho branco'>texto</div>
   <div class='filho branco'>texto</div>
   <div class='filho branco'>texto</div>
   <div class='filho azul'>texto</div>
</div>

I’d like to keep it that way, but I don’t control the order of the Ivs.

.pai{
  width: 300px;
  border: 1px solid black;
  height: 50px;
}
.filho{
  width: 40px;
  margin: 2px;
  border: 1px solid black;
}
.azul{
  float:left;
  background-color: blue;
}
.branco{
  float:left;
  background-color: white;
}

<div class='pai'>
   <div class='filho azul'>texto</div>
   <div class='filho azul'>texto</div>
   <div class='filho azul'>texto</div>
   <div class='filho azul'>texto</div>
   <div class='filho branco'>texto</div>
   <div class='filho branco'>texto</div>
   <div class='filho branco'>texto</div>
   <div class='filho branco'>texto</div>
</div>

How to do ?

Answer 1

With display:flex in the father you can use the attribute order in children, all children by default have order 0, then you just put in the kids who are azul order:1 and their children branco order:2, that way everything that is blue will come before, regardless of the order of the tags in HTML.

Behold:

.pai {
    width: 300px;
    border: 1px solid black;
    height: 50px;
    display: flex;
    flex-wrap: wrap;
}

.filho {
    width: 40px;
    margin: 2px;
    border: 1px solid black;
}

.azul {
    /* float: left; */
    background-color: blue;
    /* tode que é azul vem primeiro order:1 */
    order: 1;
}

.branco {
    /* float: right; */
    background-color: white;
    /* vem depois de tudo que for order:1 */
    order: 2;
}

<div class="pai">
    <div class="filho azul">texto</div>
    <div class="filho branco">texto</div>
    <div class="filho azul">texto</div>
    <div class="filho azul">texto</div>
    <div class="filho branco">texto</div>
    <div class="filho branco">texto</div>
    <div class="filho branco">texto</div>
    <div class="filho azul">texto</div>
</div>

OBS: Here you can read more about the attribute order: https://developer.mozilla.org/en-US/docs/Web/CSS/order