Search code examples
htmlcssblazortitlesyncfusion

How to place 2 <div>'s next to eachother instead of below eachother in Blazor SyncFusion Card Component?

I'm using the Card component in SyncFusion blazor, this component has a title and a subtitle property. In default situation those are placed below eachother:

enter image description here

The following css is used:

Title:

enter image description here

Sub title:

enter image description here

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

enter image description here

Does anyone know the right css for this?

Thanks in advance!

Solution

  • You can specify display : inline for e-card-header-title and e-card-sub-title class in css style to display title and subtitle in same row.

    Snippet

    .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;
 }

    Screenshot

    enter image description here

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

    Thanks, Durga G