I’m trying to style a radios element to be inline like “Historic District”, but without making the wrapping element inline as well, which causes quirky wrapping (“Number of Bedrooms” should be left-aligned, right below “Heated SF” if this worked how I want). All the elements in this screenshot have these tailwinds classes: w-64 float-left mr-4, and “Historic District” also has inline class.
I think this is actually caused by the way divs are placed, if you add a clear fix to “Draw a straight line” under the first three elements, then it should float left to the leftmost side.
Basically I think there is ‘space’ for it to ‘fit’ into the jigsaw of spaces.
Thanks, that does work although it doesn’t work for me in this scenario since the fields are dynamically defined, so the order and breakpoint will change. I should note that the inline class only worked as it did because we had site CSS like this: How to use Tailwind CSS? - #8 by Dave
I ended up resolving this issue by using flex-box: wrap on a fieldset parent element.