How to float only the second div to the right in a container and wrap the first div if it is too long
I have rows containing text and data.
The text box must be aligned to the left, and text-align left. The number box must be right aligned and the text right aligned.
They should exist side by side, unless the name is too long, in which case the number box will wrap within the line. All numbers in the row should be packed together. Each name has a different length on each line.
When the number box wraps, the outer container must expand vertically because there is a border below it that must stay below the number, and the next line has a margin top that must be pushed down.
The 2 columns of numbers per row must be vertically aligned in all rows.
Because there are many lines, hundreds of them, redundant markup should be minimized to keep rendering times short.
What I tried:
I tried using float, but float unbinds the div from the parent container and does not cause the parent box to expand vertically when wrapping.
I tried using a position of right:0px but the number box doesn't wrap.
I tried using flex, but the numbers no longer line up with the other rows because each text and number on each row is a different length.
HTML
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<br />
<br />
<div class="container">
<div class="row">
<div class="rowName">short name</div>
<div class="rowData">
<div>000 xx</div>
<div>000 %</div>
</div>
</div>
<div class="row">
<div class="rowName">long name long name long name</div>
<div class="rowData">
<div>000 xx</div>
<div>0 %</div>
</div>
</div>
</div>
</body>
</html>
CSS
.container {
width: 300px;
}
.row {
width: 100%;
margin-top: 6px;
margin-bottom: 4px;
padding-bottom: 2px;
border-bottom: 1px solid #cccccc;
}
.row > div:nth-child(2) {
text-align: right; /* has no effect */
}
.row > .rowName {
display: inline-block;
}
.row > .rowData {
display: inline-block;
}
.row > .rowData > div {
display: inline-block;
width: 50px;
text-align: right
}
Answers to similar questions cannot meet all requirements.
How can I achieve the first div (text) to be left aligned and the second div (number group) to be right aligned, keep the columns aligned, wrap when there is not enough space, and somehow cause its parent container to expand vertically wrapped.
