<div class="container">
        <div class="parent">
            <div class="form-wrapper">
                <div class="row">
                    <span>Name:</span>
                    <input type="text">
                </div>
                <div class="row">
                    <span>Surname:</span>
                    <input type="text">
                    <input class="small" type="text">
                </div>
            </div>
        </div>
    </div>

.parent {
    width: 400px;
    padding: 10px;
    border: 1px dashed red;
}
.form-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    max-width: 270px;
    margin: 0 auto;
}

.row {
    display: flex;
    gap: 5px;
    margin-bottom: 5px;
    width: 100%;
}
span {
    flex: 0 0 70px;
    text-align: right;
}

.small {
    width: 40px;
}