How to align all elements on same axis

I am trying to align all my elements on the same axis. The element can be anything: input, dropdown, button, etc. I am trying to accomplish this using only CSS. I know we can use MUI Stack component to align them but I only want to do it via CSS. The first image below shows an example of how it currently looks, which you can see is unaligned. The second image is the expected alignment that I want. Not sure how to proceed to make it aligned?

It is not aligned

It is aligned

import * as React from "react";
import Button from "@mui/material/Button";
import TextField from "@mui/material/TextField";

export default function BasicButtons() {
  return (
    <span>
      <TextField id="standard-basic" label="Standard" variant="standard" />
      <Button variant="contained">Contained</Button>
      <Button variant="outlined">Outlined</Button>
    </span>
  );
}