I am facing a challenge with a container that contains two child elements (previous and next links). These links have labels of different lengths, but I need them both to have the same width on the page. Ideally, each link should be as wide as the widest element, without exceeding that width. The pagination container should adjust its width based on the text length of the links, rather than spanning the entire width of the page unnecessarily. Since the text of the links may change, setting a fixed width is not a viable solution.
Currently, I have this setup: http://jsbin.com/kukucusabecu/1/edit?html,css,output. However, my goal is to ensure that the "Next" link matches the width of the "Previous" link dynamically, avoiding fixed widths due to variable text content.
I have researched on Stack Overflow and came across a similar discussion here: Make Two Floated CSS Elements the Same Height. While informative, it focuses on equalizing heights rather than widths. Using a table for this purpose is not practical since the data does not fit within a table format.