How to align a checkbox to the first line of text from two lines?

Question

css

Dear CSS masters, tell me how to align the checkbox on the first line?
Unfortunately, I'm not using a native checkbox, but this library https://element.eleme.io/ for vue js.
As a result, the output is the following html:

<p><label  role="checkbox" class="el-checkbox">
    <span aria-checked="mixed" class="el-checkbox__input">
        <span class="el-checkbox__inner"></span>
        <input type="checkbox" aria-hidden="true" class="el-checkbox__original" 
                    value="oop_treasury_concessionaire_daily_report__full_access">
    </span>
    <span class="el-checkbox__label">
        Ежедневный отчет концессионера. Полный доступ
    <!----></span>
</label>
</p>

<p ><label role="checkbox" class="el-checkbox"><span aria-checked="mixed" class="el-checkbox__input"><span class="el-checkbox__inner"></span><input type="checkbox" aria-hidden="true" class="el-checkbox__original" value="sno_znu__view"></span><span class="el-checkbox__label">
                                                        ЗНУ: Просмотр
                                            <!----></span></label></p>

It looks like this to me.

The width of p will be limited and hyphenation is needed anyway!
As you can see, the line break alignment ( white-space: normal;)
of the checkbox itself follows the bottom line.
How can I make it align to the top line?
If I put
.el-checkbox__label {
white-space: normal;
vertical-align: top;
}
then the checkbox rises to the top, but slides down to the very top of the label and is not on the same axis as the line:

On the codepen, I connected styles from element ui about the same as I draw:
https://codepen.io/alex-buki/pen /YojMdZ

Answer 1

.el-checkbox__input {
    vertical-align: top;
    margin-top: 3px;
}