[help] Trying to get 3 skills and their respective inputs/button on a single line in a "pretty" way.

I'm currently in the very first steps of trying to create a Stars Without Number Revised sheet by jacking away at the Sprawl character sheet. I have previous, light, experience with HTML and CSS so this is also an exercise in refreshing myself with how it all works.&nbsp; I've integrated the skills present in SWN into the Sprawl sheet, but am trying to make them "look nice" so to speak. I want Three skills and their input/roll stuff to be present on each line. The following is EXTREMELY close to what I want: <a href="https://imgur.com/a/MNTEj" rel="nofollow">https://imgur.com/a/MNTEj</a> Notice that there are 3 skills on each line, starting with ADMINISTER. My issue with it is that the inputs and button aren't aligned. My ideal scenario is to have all text to remain exactly where it is, but have the inputs and buttons also aligned perfectly. This means the stuff next to all skills(besides Administer) need shifted to the right. My main attempt at remedying this was to set sheet-colTEST to 16% width, then &lt;div&gt; up the text away from the buttons. Unfortunately it did weird things. NOTE: I only divided up the first four skills, ADMINISTER, CONNECT, EXERT, and FIX. Since only 3 skills and their buttons can fit with 16% I assume this isn't the source of my problems. <a href="https://imgur.com/a/bgWGv" rel="nofollow">https://imgur.com/a/bgWGv</a> As noted in the comments, the inputs and button are now "higher" than the text, and I would prefer the inputs/buttons to be shifted closer to their respective texts(right now it appears that they align much closer to the next skill than the skill they are actually asssociated with. I expect the solution to this is simple, as I'm relearning html and css as I go. Any help would be appreciated!

Okay, here's what I'd do to layout this. Note that this works (well, should work, it's untested) with your initial HTML, not the one where you have divided up things. No more floats, because floats are evil. .sheet-column6 { display: flex; flex-wrap: wrap; } .sheet-colTEST { display: flex; width: calc(100%/3); /* true thirds instead of 33% */ align-items: center; /* this controls vertical alignment inside the div; you can try baseline if center looks off */ flex: 0 0 auto; /* the divs should neither shrink nor grow */ } .sheet-colTEST label { margin: 0 auto 0 0; /* This is important, the label's right margin will now eat up all the remaining space. This only works for flex items, which is why we use display: flex */ } .sheet-colTEST input[type=number] { margin: 0 4px 0 0; /* Put whatever right margin looks good */ } .sheet-colTEST input[type=radio] { margin: 0 4px 0 0; /* Put whatever right margin looks good */ } .sheet-colTEST button[type=roll] { margin: 0 10px 0 0; /* Put whatever left/right margins look good. A higher number here will shift all the inputs to the left, away from the subsequent skill label. Alternatively, you could set the right margin to 0 here and instead add some right padding to the .sheet-colTEST for the same result. */ } One remark here, you can delete all the for=... tags on your labels. They don't do anything.