I have an array of words being passed to a component and trying to display each word underneath each other in input tags but they are being displayed next to each other

my file:

const Words = ({arr}) => {

let num = ((100/arr.length) - (1)).toString() + '%';
console.log(arr)
return (
    <div>

        {arr.map((letter, idx) =>{
            return(
                <input 
                    className="letters" 
                    type='text' 
                    key={idx} 
                    style={{width: num}}
                />
            )
        })}

        <br/>
    </div>
)

}

CSS file:

    .letters{
    display: flex;
    float:left;
    margin-left: 2px;
}

my main file:

    const App = () => {
  let words = ['Hello', 'World']
  return(
    <Container className="main-content">
      {words.map((word) =>{
        return(
          <Words arr={word.split('')} />
        )
      })}
    </Container>
  );
}

CSS file:

    .main-content{

  display: flex;
  background-color: gray;
  color: white;
  min-height: 100vh;
  width: 100%;
  align-items: center;
  justify-content: center;
  left: 10%;
}