CSS-Aling-Elemente in derselben Zeile [geschlossen]

Geschlossen. Diese Frage braucht Details oder Klarheit. Es akzeptiert derzeit keine Antworten.

Lösung des Problems

Etwas wie das? Die großen Stilauffüllungen wurden entfernt: style="padding-left: 70px;", style="padding-left: 140px"aus den divs. div.rowerstes Kind und .legendcontainermit width: fit-content;zu ihrem Inhalt passen und margin-left: auto, ( .ms-auto) damit sie zum Ende gehen. .colDas Div der Schaltflächen wurde auf col-8(60 % groß) und der Legendencontainer auf col-4(40 % groß) geändert. Die maximale Spaltengröße von Bootstrap (und die Standardeinstellung, wenn sie nicht definiert ist) ist 12 (8+4).

.legendContainer {
 width: fit-content;
 margin-left: auto;
}
.legend {
 list-style: none;
 margin: 0;
}
.legend li {
 float: left;
}
.legend span {
 border: 1px solid #ccc;
 float: left;
 width: 12px;
 height: 12px;
 margin: 2px;
 margin-right: 5px;
}
.legendTitle {
 font-weight: bold;
}
.legend.KO {
 background-color: #FFA8A8;
}
.legend.aOK {
 background-color: #B6FFCE;
}
.legend.send {
 background-color: #F6FFA4;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row flex-row justify-content-center w-100 align-items-center">
 <div class="col-8 ms-auto p-0" style="width:fit-content;">
 <button>Offers</button>
 <button>Opportunity</button>
 </div>
 <div class="col-4">
 <div class="legendContainer" *ngIf="tableOffer">
 <ul class="legend">
 <div class="legendTitle">Legend</div>
 <li><span class="KO"></span> KO</li><br>
 <li><span class="Send"></span>Send</li><br>
 <li><span class="OK"></span> OK</li>
 </ul>
 </div>
 </div>
</div>