How can i consistently align label font text next to the input form to be exactly centered vertically in CSS?

I have a label and an input form next to it. By default, with font family Cambria, the input box is slightly lower than the label text to it. this is what's my current setup looks like, if you look closely, input box is slightly lower than the font

this is what i am trying to achieve: input box exactly centered after ":" (colon) I was able to achieve it through manipulating height/line-height of label in CSS, but i am trying to find a more elegant and simple approach (if its possible) to adjust any font next to desired item.

https://jsfiddle.net/5yuv34Ln/1/ - this is my original code where you can see that input form is slightly lower than font.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles/styles.css">
    <title>Guess a Number Game</title>
</head>

<body>
    <main>
        <header class="header">Guess a Number Game</header>
        <div class="main-text">From 1 to 20</div>
        <div class="input">
            <label class="main-text" for="guess-input">Put your guess here:</label>
            <input id="guess-input" type="number">
        </div>
        <section>
            <div id="feedback"></div>
        </section>
        <div>
            <button id="guess-button" class="btn">Guess</button>
        </div>
        <div>
            <button id="again-button" class="btn">Play Again</button>
        </div>
    </main>
    <script src="scripts/index.js"></script>
</body>

</html>

CSS

.btn {
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    font-size: x-large;
    margin: 10px 0px;
}

.main-text {
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    font-size: x-large;

}

.header {
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    font-size: x-large;
    border-bottom: solid;
    background-color: beige;
    font-weight: bold;
    color: darkslategray
}

#feedback {
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    font-size: x-large;
    border-top: solid;
    margin-top: 20px;
    padding: 10px;
}

#guess-input[type=number]::-webkit-inner-spin-button,
#guess-input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

https://jsfiddle.net/5yuv34Ln/ - this is solution that my friend offered, but i am wondering if there is any other options i can use to do so in a simple or organized way, without manually adjusting pixels around label.

Solution

in order to align vertically the two elements in the line you just have to specify a line height for the row items and change the vertical-align value for the parent DIV (that is "baseline") to "text-top" like this :

div.input input,
div.input label{
  line-height: 30px;
  vertical-align: text-top;
}