Css 如何对齐2个并排div的基线？

这是来自的页面。
我创建了一个名为日记账分录的灰色框

第1点读作记录…
如您所见，以For开头的文本略低于数字1的级别。
第2点也是如此

请建议我应该对代码进行哪些更改

我的代码：

<div style="background-color: #F0F0F0; display: table-cell; vertical-align: middle; border-radius: 15px;">
    <div style="margin-left: 10px; margin-right: 100px; margin-top: 15px; margin-bottom: 15px;">


        <div style="text-align: center;"><span style="font-family: georgia; font-size: 17px; font-weight: bold;">Journal entries</span></div>

        <br>


        <div style="font-family: serif; font-size: 17px; margin-left: 30px;">

            <div style="float: left;">1.&nbsp;</div>
            <div>For recording 1<sup>st</sup> aspect, asset value is reduced period-wise by crediting its account:</div>
            <div style="margin-left: 20px;">Depreciation A/c&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;...Dr.
                <br>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;To Asset A/c</div>

            <br>

            <div style="float: left;">2.&nbsp;</div>
            <div>For recording 2<sup>nd</sup> aspect, the depreciation for the period is transferred to the Profit &amp; Loss Account:</div>
            <div style="margin-left: 20px;">Profit and Loss A/c&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;...Dr.
                <br>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;To Depreciation A/c</div>

        </div>


    </div>
</div>

日记账分录


1.
对于记录第一个方面，通过记入其账户，资产价值在不同期间减少：
折旧A/c…Dr。


资产负债表


2.
为了记录第二个方面，将该期间的折旧转移到损益表中；损失账户：
损益账。


折旧科目

使用

SPAN

而不是

DIV

元素。如果无法更改html，则使用CSS将

display:inline

分配给那些

DIV

元素。也不要对编号元素使用

float:left

。

根据您的评论，您根本不希望文本位于数字下方。一种选择是将数字放在文本

div

中，然后将其绝对放置在角落中。然后在div中添加一点填充以移动文本：

<div class="text">
    <div class="num">
        1.
    </div>

    stuff
</div>

---

谢谢詹姆斯和格林，但我不想让文字出现在数字下面。所以，左边的数字和右边的文本应该在两个不同的层次上，不要混合或包装在一起。@rohitmakkar，这在你的问题中是不清楚的。答案已更新。

.text{
    position: relative;
    padding-left: 20px;
}

.num{
    position: absolute; 
    width: 20px;
    top: 0;
    left: 0;
}