I've been wrestling with this one for a few weeks and need to ask the brain trust here :)

I have a simple 1 row table with number fields in it. I am trying to set it to appear as another simple 1 row table I have with text fields.

Number fields:

Text fields:


CSS on the text fields to center the field and set a min-width:

.workMonthSubTotals table tbody tr .centerHours fl-single-line {
	min-width: 4rem !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align:center !important;
}

Here is what does not work on the number table:

.percentageTbl2 table tbody tr .center input  {
    min-width: 3rem !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
}

^I've tried every variation of this that I can think of with no luck.

One thing at play here is that number fields have 2 input fields. One you can increment up/down with the arrows, then it populates the text input field (or at least I am guessing..):

Has anyone been down this rabbit hole already and found a way out of it?