I am struggling with aligning two divs within a container div, one on the left and one on the right. I am using flexbox for alignment purposes, as shown in the code snippet below.
.box {
display: flex;
align-items: center;
justify-content: space-between;
width: 232px;
height: 40px;
margin: 0 auto;
background-color: lightblue;
}
.name {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.number {
font-size: 14px;
text-align: right;
background-color: lightblue;
}
My issue arises when there isn't enough space to fit both divs within the specified width. Ideally, I want the right div to take up all available space while the left div shrinks and adds an ellipsis if necessary. However, sometimes the content in the second div spills over onto the next line. Is there a way to prevent this from happening? Check out the provided jsFiddle example to see 'NUMBER' being pushed to the next line.