stop trying to force everything into a grid with fixed columns. if you have a label or a button that looks
broken weird when it shrinks, just use width: min-content. it keeps the box from getting wider than its longest word and prevents that awkward single-character line break mess.
.label {width: min-content;white-space: nowrap;}tbh most people overcomplicate this with unnecessary media queries when you could just let the intrinsic size do the work