JSFiddle - React, Tailwind, and code Playground

HTML

<div class="s-nav"><div class="s-box select">
		<span class="s-choice" data-select="nb_result" data-default="Nombre de résultat par page"><o>{{data-sort}}</o><i class="i-ico right material-icons">&#xE5C5;</i></span> <!-- Devient ouvert : &#xE5C7; et ferme : &#xE5C5; -->
			<ul class="s-list inactive" data-list="nb_result">
				<li class="s-list__item choice" data-sort="sort-az">20 par page</li>
				<li class="s-list__item" data-sort="sort-za">50 par page</li>
				<li class="s-list__item" data-sort="sort-za">100 par page</li>
				<li class="s-list__item" data-sort="sort-za">200 par page</li>
			</ul>
		</div><!--
		--><div class="s-box">
			<span class="s-visual active"><i class="s-ico material-icons">&#xE8F0;</i> Mosaïque</span>
		</div><!--
		--><div class="s-box">
			<span class="s-visual"><i class="s-ico material-icons">&#xE8EF;</i> Liste</span>
		</div><!--
		--><div class="s-box select">
		<span class="s-choice" data-select="sort" data-default="Trier par pertinence"><o>{{data-sort}}</o><i class="i-ico right material-icons">&#xE5C5;</i></span> <!-- Devient ouvert : &#xE5C7; et ferme : &#xE5C5; -->
			<ul class="s-list inactive" data-list="sort">
				<li class="s-list__item" data-sort="sort-az">Titre A-Z</li>
				<li class="s-list__item choice" data-sort="sort-za">Titre Z-A</li>
				<li class="s-list__item" data-sort="sort-news">Nouveautés</li>
				<li class="s-list__item" data-sort="sort-teamchoice">Choix de l'équipe</li>
				<li class="s-list__item" data-sort="sort-author">Trier par auteur</li>
				<li class="s-list__item" data-sort="sort-editor">Trier par éditeur</li>
				<li class="s-list__item" data-sort="sort-category">Trier par catégorie</li>
			</ul>
		</div>
	</div>

CSS

div.s-nav
{
  display: flex;
  position: relative;
  flex-direction: row;
  justify-content: flex-start;
  
  height: 50px;
  border-bottom: 1px solid #ccc;
}
div.s-nav div.s-box
{
  display: inline-flex;
  position: relative;
  
  min-width: 15%;
  border-right: 1px solid #ccc;
}
div.s-nav div.s-box.select
{
  background: #ccc;
  padding: 5px;
}

div.s-nav div.s-box span
{
  display: flex;
  position: relative;
  flex-grow: 1;
  align-items: center;
  margin-bottom: -1px;
}
div.s-nav div.s-box.select span { background: #fff; padding: 0 10px; cursor: pointer; }
div.s-nav div.s-box.select span i.i-ico { position: absolute; top: 20px; right: 20px; margin-right: -12px; margin-top: -12px; }

div.s-nav div.s-box span.s-visual
{
  /*line-height: 50px;*/
  border-bottom: 3px solid transparent;
  padding-left: 50px;
  cursor: pointer;
}
div.s-nav div.s-box span.s-visual:hover,
div.s-nav div.s-box span.s-visual.active
{
  border-bottom-color: #222;
}
div.s-nav div.s-box span.s-visual i.s-ico
{
  position: absolute;
  top: 50%;
  left: 25px;
  
  margin-top: -12px;
  margin-left: -12px;
}

div.s-nav div.s-box.select ul.s-list
{
  position: absolute;
  top: 51px;
  left: -1px;
  right: -1px;
  
  background: #fff;
  border: 1px solid #ccc;
  border-top: none;
  margin: 0px;
  list-style: none;
  padding: 0;
}
div.s-nav div.s-box.select ul.s-list.inactive { display: none; }
div.s-nav div.s-box.select ul.s-list.active { display: block; }
div.s-nav div.s-box.select ul.s-list li.s-list__item
{
  display: block;
  position: relative;
  
  padding: 5px 10px;
  margin: 0px;
  cursor: pointer;
  
  color: #222;
}
div.s-nav div.s-box.select ul.s-list li.s-list__item:hover,
div.s-nav div.s-box.select ul.s-list li.s-list__item.choice
{
  background: #eee;
}




aside.s__category
{
  display: block;
  position: fixed;
  top: 61px;
  left: 0px;
  bottom: 0px;
  
  width: 199px;
  border-right: 1px solid #ccc;
}


form.s-modal
{
  display: block;
  position: relative;
  
  height: 40px;
...

JavaScript

var s_choice_S = document.querySelectorAll('span.s-choice')
var body = document.querySelector('body')

for(var i = 0; i < s_choice_S.length; i++) {
	
	var s_choice = s_choice_S[i]
		
		var parent = s_choice.parentNode
  
		var choiceElmt = parent.querySelector('o')
		var list = parent.querySelector('ul.s-list')
		var choices_S = list.querySelector('li.s-list__item')
		
		var choiceTxt = choiceElmt.textContent
		var choiceAct = list.querySelector('li.choice')
		
		var name_attr = 'data-default'
		var attr = s_choice.getAttributeNode(name_attr)
		var defaultTxt = attr.nodeValue
		
		if(choiceAct != null) {
			
			var choiceActTxt = choiceAct.textContent
			choiceElmt.innerText = choiceActTxt
			
		} else {
			
			choiceElmt.innerText = defaultTxt
			
		}
		
	
}