How to make a HTML list appear vertically instead of horizontally using CSS only? – WordPress

I’m designing a product page on WordPress, using the Elementor and Woocommerce plugins.

I got a product data tabs made of an unordered list items from Woocommerce that shows the Description, More info and Reviews horizontally, and I’d like to style it to appear vertically with the Description, More info and Reviews text in the right of the tabs/titles.

This is the page I’m working on: This is my product page.

And I’m trying to make the Product data tabs similar to those here: This is the model page I’m learning from.

I tried to add this code in Atom, the program I’m using to edit the CSS code of the website, but it didn’t help much:

.woocommerce div.product.elementor ul.tabs  {
    display: inline-grid;
 }
 
 .tabs .wc-tabs {
   display: inline-grid;
 }

.woocommerce-Tabs-panel .woocommerce-Tabs-panel--description .panel .entry-content .wc-tab {
  display: inline-grid;
}

.woocommerce .elementor-4060 .elementor-element.elementor-element-6b584e4 .woocommerce-tabs .woocommerce-Tabs-panel {
  display: inline-grid;
}

Can I customize the unordered list to make it vertical like in the example I’m learning from with just CSS, and to have that black line under the title from the model page that grows bigger only on hover? Editing the HTML file is a bit harder since I’m working in WordPress and I’m not customized to doing that but I could try, and I don’t have any knowledge of Javascript yet (if it’s required, though I can edit the Javascript file of the website).