CODEWITHSUNDEEP
javascripthtmlmaterial-ui
Shuning Sun
Shuning Sun

Reputation: 25

Add text between two textfield in material ui

I tried to add a text between the two textfield but somehow the text is not properly aligned with the two textfield

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import TextField from '@material-ui/core/TextField';
import Typography from '@material-ui/core/Typography';

const useStyles = makeStyles((theme) => ({
  root: {
    '& > *': {
      margin: theme.spacing(1),
      width: '12ch',
    },
    display:"row"
  },
}));

export default function BasicTextFields() {
  const classes = useStyles();

  return (
    <form className={classes.root} noValidate autoComplete="off">
      <TextField id="standard-basic" label="Standard" />
      <font size="6">feet</font>
      <TextField id="outlined-basic" label="Outlined" variant="outlined" />
      <font size="">inches</font>
    </form>
  );
}

The text is not aligned with the textfield

Reference: https://codesandbox.io/s/m43tj?file=/demo.js:0-719

Upvotes: 0

Views: 209

Answers (1)

Lineu Pastorelli
Lineu Pastorelli

Reputation: 512

In this root class, which is your form's container, add the following style:

display: 'flex',
alignItems: 'center',

Hope this helped =)

Upvotes: 1

Related Questions