How can I create a paragraph element with 3 columns?
.foo {
display: flex;
align-items: center;
}
.column {
border: 3px solid blue;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}<p class="foo">
<span class="first column">first</span>
<span class="second column">second</span>
<span class="third column">third</span>
</p>Here are the rules:
- All 3 columns should display in a single row, even if they contain large characters.
- The first column's max-width is set to 70%.
- The second column's max-width is 50px.
- If the first and second columns fill up the entire row, the third column may not be displayed.
I am struggling with using flexbox to achieve this layout. Could someone please provide a solution?