Как разместить 2 <div>рядом друг с другом, а не под друг другом в компоненте Blazor SyncFusion Card?

Question

Я использую компонент Card в SyncFusion blazor, у этого компонента есть свойство title и subtitle. По умолчанию они расположены ниже друг друга:

The following css is used:

Title:

Sub title:

However I'm trying to place these items next to eachother like this:

введите описание изображения здесь

Кто-нибудь знает правильный css для этого?

Заранее спасибо!

Answer 1

.e-card-header-caption { display: flex; flex-direction: row; }

Answer 2

Вы можете указать display: inline для e-card-header-title и e-card-sub-title class в стиле css, чтобы отображать заголовок и подзаголовок в одной строке.

Фрагмент

.e-card .e-card-header .e-card-header-caption .e-card-header-title {
   display: inline;
 }
.e-card .e-card-header .e-card-header-caption .e-card-sub-title {
   display: inline;
 }

Снимок экрана

Sample https://www.syncfusion.com/downloads/support/directtrac/general/ze/Subtitle1482508206.zip

Спасибо, Дурга G