How do I display items in a ListBox horizontally?

@using Syncfusion.Blazor.DropDowns
 
<div id="listbox-control">
   <h4>Select your favorite car:</h4>
   <SfListBox Value=@Value CssClass="e-horizontal-listbox" DataSource="@Data" TValue="string[]" TItem="DataValues"></SfListBox>
</div>
 
<style>
 
    #listbox-control {
        width: 350px;
        margin: auto;
    }
 
    /* Custom css for horizontal listbox */
    .e-horizontal-listbox .e-list-parent {
        display: inline-flex;
        align-items: center;
    }
 
    .e-horizontal-listbox {
        overflow-y: hidden;
        height: 100px;
    }
 
    .e-horizontal-listbox .e-list-parent .e-list-item {
        width: max-content;
        line-height: 100px;
        height: 100px;
     }
</style>
 
@code{
    public string[] Value = new string[] { "Hennessey Venom" };
    public List<DataValues> Data = new List<DataValues>
    {
        new DataValues{ text = "Hennessey Venom", id = "list-01" },
        new DataValues{ text = "Bugatti Chiron", id = "list-02" },
        new DataValues{ text = "Bugatti Veyron Super Sport", id = "list-03" },
        new DataValues{ text = "SSC Ultimate Aero", id = "list-04" },
        new DataValues{ text = "Koenigsegg CCR", id = "list-05" },
        new DataValues{ text = "McLaren F1", id = "list-06" },
        new DataValues{ text = "Aston Martin One- 77", id = "list-07" },
        new DataValues{ text = "Jaguar XJ220", id = "list-08" },
        new DataValues{ text = "McLaren P1", id = "list-09" },
        new DataValues{ text = "Ferrari LaFerrari", id = "list-10" }
    };
    public class DataValues
    {
        public string text { get; set; }
        public string id { get; set; }
    }
}