Styling TextBoxes in FluentUI

I am creating a dashboard in react with FLuentUI. I have a row of textBoxes and they are just not lining up - as you can see. Can someone give me a starter please on how to line these up :

As you can see the 'Enter text here is not straight with the others. here is my react code.

return (
    <div style={{ fontSize: FontSizes.size42 }} className="ms-Grid" dir="ltr">
      <ProducingBroker currency={currency} setCurrency={setCurrency} />
      <BrokerContact currency={currency} setCurrency={setCurrency} />
      <OriginalInsured currency={currency} setCurrency={setCurrency} />
      <ReinsuredName currency={currency} setCurrency={setCurrency} />
      <label>{mailboxitem.itemId}</label>
    </div>

I know I need to put some styling around it, just need a starter please.