[Solved] How to align an input box with a button label

Anton Asks: How to align an input box with a button label
I’m using materialUI and React to create a form with Selects and input boxes and corresponding labels. I’m trying to change the code such that the labels double as materialUI buttons.

Code:
<InputLabel id="attribute-input-label" shrink={true}>
        {name}
</InputLabel>
<Select
labelId="attribute-input-label"
id="attribute-label"
value={value}
onChange={onChange}
label={constraint.name}
fullWidth
disabled={disabled}
>
{constraint.categories.map((item: string, index) => (
       <MenuItem key={index} value={item}>
            {item}
       </MenuItem>
))}
</Select>

I first tried just surrounding the inputLabel element in Button tags but that seemed to cause all sorts of bugs and when I finally got through them all the Button size was smaller than the text.

I instead used a typography element and it worked much better but I can’t get the typography to align nicely with the textbox the way it did with inputLabel. I have set the id of the typography element to that of inputLabel yet it doesn’t align with the select.

Is there a way of aligning non-inputLabel text with a input boxes and Selects?

Ten-tools.com may not be responsible for the answers or solutions given to any question asked by the users. All Answers or responses are user generated answers and we do not have proof of its validity or correctness. Please vote for the answer that helped you in order to help others find out which is the most helpful answer. Questions labeled as solved may be solved or may not be solved depending on the type of question and the date posted for some posts may be scheduled to be deleted periodically. Do not hesitate to share your response here to help other visitors like you. Thank you, Ten-tools.