如何使第一个元素与右侧对齐，其他元素在左侧对齐？

Question

I have two HTML elements: label and span inside a div I want the label aligned to the right and the span in the left of the labe;

like this :

But this is what I have:

this is the HTML and CSS code:

 .barcode-pdf-body div { text-align: right; border-color: transparent; margin-top: 0; font-size: 10px; margin-bottom: 9px; } .barcode-pdf-body div label { margin-left: 5px; font-weight: bold; font-family: "myFont"; } .barcode-pdf-body div span { font-family: "myFont"; }

 <div> <label> {% trans 'constraint_number' %}: </label> <span> {{ correspondence.number }} </span> </div>

Answer 1

If you can change only CSS file, check code below:

 .barcode-pdf-body div { text-align: right; border-color: transparent; margin-top: 0; font-size: 10px; margin-bottom: 9px; display: flex; } .barcode-pdf-body div label { margin-left: 5px; font-weight: bold; font-family: "myFont"; order: 2; } .barcode-pdf-body div span { font-family: "myFont"; order: 1; }

 <div> <label> {% trans 'constraint_number' %}: </label> <span> {{ correspondence.number }} </span> </div>

Answer 2

please try it like this:

div label {
float:right;
} 
div span {
float:left;
}