Unwanted Space Between Spans Flex - html

Question

I'm trying to use a flexbox with flex-wrap: wrap to place these two pieces of together. It should say Welcome with the subtitle immediately below. Instead, each span seems to be taking up way too much space, but adjusting the heights instead helping. What could be going on here?
class SignUp extends Component {
render() {
return (
<React.Fragment >
<div id={"container"}>
<div id={"signup-container"}>
<span className={"suTitle"}><p>Welcome!</p></span>
<span className={"subtitle"}><p>Sign up for a free account today.</p></span>
</div>
</div>
</React.Fragment>
);
}
}
.suTitle{
width: 100%;
height: 10%;
padding: 5%;
margin: 0;
background-color: black;
font-family: 'Poppins';
font-style: normal;
font-weight: 700;
font-size: 50px;
color: #0064FF;
}
.subtitle {
font-family: 'Poppins';
font-style: normal;
font-weight: 500;
font-size: 30px;
padding: 5%;
margin: 0;
color: rgba(51, 51, 51, 0.5);
}
#container {
display: flex;
height: 100%;
justify-content: right;
background: linear-gradient(247.13deg, rgba(0, 100, 255, 0.8) 0%, rgba(101, 215, 192, 0.8) 68.23%, rgba(2, 186, 144, 0.8) 100%);
}
#signup-container {
display: flex;
flex-wrap: wrap;
flex-direction: row;
right: 0;
background-color: white;
}