Adjust column width according to content - html

Question

I'm designing a simple webpage using HTML and CSS. I want to design a row at the top of my page which shall have 4 buttons - lets say with content "A", "BB", "CCC", "DDDD". I want to create these 4 buttons such that their width differs according to the length of the content, i.e "A" would be small, but "DDDD" would be a bigger button since it has 4 letters instead of 1.
Can I achieve this using just HTML and CSS or do I need to learn any more technologies for this?

Answer 1

This can be done with HTML alone:
<div class="top-row">
<button>A</button>
<button>BB</button>
<button>CCC</button>
<button>DDDD</button>
</div>

Answer 2

You can absolutely do that with flexbox. For example:
div.header {
position: fixed;
top: 0;
left: 0;
width: 100vw;
display: flex; /* This element is a flexbox */
}
a.button {
background-color: green;
min-width: 50px;
text-align: center;
border: 1px solid white;
}
section {
display: flex; /* This element is a flexbox */
flex-direction: row;
flex-wrap: nowrap;
background: pink;
}
div.column {
border: 1px solid grey;
min-height: 100vh;
}
/* These properties set the column widths within an element that is a flexbox */
.width-1x {
flex-grow: 1;
}
.width-2x {
flex-grow: 2;
}
.width-3x {
flex-grow: 3;
}
.width-4x {
flex-grow: 4;
}
<div class="header">
A
BB
CCC
DDDD
</div>
<section>
<div class="column width-1x"></div>
<div class="column width-2x"></div>
<div class="column width-3x"></div>
<div class="column width-4x"></div>
</section>
By setting the CSS flex-grow property of each button, we can decide what proportion of the width it would take.
Doing this through JavaScript would also work in the case that the columns need to be updated automatically according to their number of characters.