JSFiddle - React, Tailwind, and code Playground

by locally

HTML

<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<section class="home-faqs">
    <header class="entry-header">
        	<h1 class="entry-title" itemprop="headline">Frequently Asked Questions</h1> 
    </header>
    <section class="tabbed-wrapper">
        <div id="v-nav" class="ui-tabs ui-widget ui-widget-content ui-corner-all ui-tabs-vertical ui-helper-clearfix">
            <ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all" role="tablist">
                <li class="ui-state-default ui-corner-top" role="tab" tabindex="-1" aria-controls="tab1" aria-labelledby="ui-id-1" aria-selected="false" aria-expanded="false"><a href="#tab1" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-1">One - Nulla mi sem, semper sit amet ex</a>
                </li>
                <li class="ui-state-default ui-corner-top" role="tab" tabindex="-1" aria-controls="tab2" aria-labelledby="ui-id-2" aria-selected="false" aria-expanded="false"><a href="#tab2" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-2">Two - Etiam scelerisque mauris eu nisl</a>
                </li>
                <li class="ui-state-default ui-corner-top ui-tabs-active ui-state-active" role="tab" tabindex="0" aria-controls="tab3" aria-labelledby="ui-id-3" aria-selected="true" aria-expanded="true"><a href="#tab3" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-3">Three - A long question is ver long here with a lot of words that make it long</a>
                </li>
            </ul>
            <div id="tab1" aria-labelledby="ui-id-1" class="ui-tabs-panel ui-widget-content ui-corner-bottom" role="tabpanel" aria-hidden="true" style="display: none;">One - Pellentesque sed quam iaculis, maximus lacus sed, cursus magna. Phasellus luctus aliquam urna eget condimentum. Duis iaculis congue sem sit amet posuere. Sed consequat, nulla vitae semper tempor, orci nisl aliquam leo, eu congue tellus purus eu mi....

CSS

ul {
    box-sizing: border-box;
}
.tabbed-wrapper {display: none;}
}.home-faqs{
	text-align: center;
	}
   
/* Verical Tabber
--------------------------------------------- */
.tabbed-wrapper {
	width: 80%;
	display: inline-block;
	text-align: left;
	}
	
#v-nav ul {
	width: 300px;
	float: left;
	margin-top: 0;
	margin-bottom: 0;
	
	}
#v-nav ul li {
	min-height: 50px;
}
.ui-tabs-panel {margin-left:300px;}

JavaScript

jQuery(document).ready(function ($) {
    $('#v-nav').tabs();
});