Drei Möglichkeiten, das horizontale Div-Layout auf beiden Seiten auszurichten

<div Klasse="div-Container">
  <div Klasse="div1">1</div>
  <div Klasse="div2">2</div>
</div>

/* Methode 1 */
.div-Container {
  Rand: 10px 0;
  Polsterung: 10px;
  Breite: 400px;
  Rand: 2px durchgezogen #ccc;
  Position: relativ;
}
.div1 {
  Breite: 100px;
  Höhe: 50px;
  Rand: 2px durchgehend rot;
}
.div2 {
  Breite: 100px;
  Höhe: 50px;
  Rand: 2px durchgehend rot;
  Position: absolut;
  /* Randeinstellungen */
  rechts: 10px;
  oben: 10px;
}

<div Klasse="div-Container2">
  <div Klasse="div3">3</div>
  <div Klasse="div4">4</div>
</div>

/* Methode 2 */
.div-container2 {
  Rand: 10px 0;
  Polsterung: 10px;
  Breite: 400px;
  Rand: 2px durchgezogen #ccc;
  Anzeige: Flex;
  Inhalt ausrichten: Abstand dazwischen;
}
.div3 {
  Breite: 100px;
  Höhe: 50px;
  Rand: 2px durchgehend rot;
}
.div4 {
  Breite: 100px;
  Höhe: 50px;
  Rand: 2px durchgehend rot;
}

<div Klasse="div-container3">
  <div Klasse="div5">5</div>
  <div class="div7">Platzhalter-Div</div>
  <div Klasse="div6">6</div>
</div>

/* Methode 3 */
.div-container3 {
  Rand: 10px 0;
  Polsterung: 10px;
  Breite: 400px;
  Rand: 2px durchgezogen #ccc;
  Anzeige: Flex;
  Inhalt ausrichten: Abstand dazwischen;
}
.div5 {
  Breite: 100px;
  Höhe: 50px;
  Rand: 2px durchgehend rot;
}
.div6 {
  Breite: 100px;
  Höhe: 50px;
  Rand: 2px durchgehend rot;
}
.div7 {
  Breite: berechnet (100 % – 100 Pixel – 100 Pixel);
  Höhe: 50px;
  Rand: 1px durchgezogen #ccc;
}