Должны ли мы делить div по вертикали со строкой и без структуры таблицы?

Question

Я новичок в Asp.net MVC. Я делаю свой проект по системе управления студентами. В этом проекте мне нужно отобразить итоговые результаты ученика в разделенной форме Так что у меня проблемы с отображением результатов.

Мой фактический результат похож на это изображение:

Я пытаюсь код ниже:

<div>25<hr>30</div>

Я получу этот результат:

Answer 1

Добавьте style="display: inline-block;" в div, и он будет работать.

Answer 2

.result {
    list-style: none;
    font-size: 45px;
    font-weight: 600;
}
.result li:first-child {
    border-bottom: 4px solid;
    width: fit-content;
    line-height: 0.9;
}

<div class="result"><li>25</li><li>30</li></div>

Answer 3

Окончательный ответ:

<div style="display: inline-block;">
25 
<div style="clear:both;border-bottom:1px solid;"></div> 
30
</div>