flexbox elements too far apart with different font sizes - css

Question

I need all of my elements inside my flexbox container to be close to each other. Unfortunately, since they have different font sizes, this is proving hard to accomplish. I could fix it using margins, but it seems like a hacky way to do it.
#price {
font-weight: bold;
border: none;
font-size: 1.5em;
}
#currency {
color: #000000;
font-size: 1.5em;
font-weight: bold;
}
#price:focus {
outline: none;
}
#price-info {
display: flex;
align-items: flex-start;
}
<div id="price-info">
<p id="currency">U$S</p><input id="price" type="text" value={this.state.price} onChange={this.handleChange} />
<p>$/m2{sizePrice}</p>
</div>
Updated problem, still spacing problems

Answer 1

#price{
font-weight: bold;
border:none;
font-size: 1.5em;
}
#currency{
color:#000000;
font-size: 1.5em;
font-weight: bold;
}
#price:focus {
outline:none;
}
#price-info{
display: flex;
justify-content: center;
align-items: baseline
}
<div id="price-info">
<p id="currency">U$S</p><input id="price" type="text" value={this.state.price} onChange={this.handleChange} />
<p>$/m2{sizePrice}</p>
</div>
Here is a possible solution you are looking for.
You can play around with justify-content to place your elements horizontally.
I believe what you wanted can be done by align-items property.

Answer 2

Try this. but is not much easy you have to set margins manually
#price {
font-weight: bold;
border: none;
font-size: 1.5em;
}
#currency {
color: #000000;
font-size: 1.5em;
font-weight: bold;
margin-right: .3rem;
}
#price:focus {
outline: none;
}
#price-info {
display: flex;
align-items: center;
}
#size-price{
margin-left: -5rem;
}
.itens{
display: inline-block;
width: fit-content;
}
<div id="price-info">
<p class="itens" id="currency">U$S</p>
<input class="itens" id="price" type="text" value={this.state.price} onChange={this.handleChange} />
<p class="itens" id="size-price">$/m2{sizePrice}</p>
</div>