JSFiddle - React, Tailwind, and code Playground

by envira

HTML

<dl id="select_boarding_area" class="dropdown">
<dt><a href="#"><span class="city">Wouwse Plantage</span> <span class="address">Jasmijnstraat</span> <span class="value">FR</span></a></dt>
<dd>
  <ul>
    <li><a href="#"><span class="city">Wouwse Plantage</span> <span class="address">Jasmijnstraat</span> <span class="value">FR</span></a></li>
    <li><a href="#"><span class="city">Amersfoort</span> <span class="address">Station NS - busstation straat 5</span> <span class="value">DE</span></a></li>
    <li><a href="#"><span class="city">Dordrecht</span> <span class="address">Station NS - antwerpsestraat 5</span> <span class="value">DE</span></a></li>
    <li><a href="#"><span class="city">Zwijndrecht</span> <span class="address">Station NS - Koningsweg 5</span> <span class="value">DE</span></a></li>
    <li><a href="#"><span class="city">Den Haag</span> <span class="address">Station NS - blaatstraat 5</span> <span class="value">DE</span></a></li>
  </ul>
</dd>
</dl>
<dl id="select_boarding_area" class="dropdown">
<dt><a href="#"><span class="city">Wouwse Plantage</span> <span class="address">Jasmijnstraat</span> <span class="value">FR</span></a></dt>
<dd>
  <ul>
    <li><a href="#"><span class="city">Wouwse Plantage</span> <span class="address">Jasmijnstraat</span> <span class="value">FR</span></a></li>
    <li><a href="#"><span class="city">Amersfoort</span> <span class="address">Station NS - busstation straat 5</span> <span class="value">DE</span></a></li>
    <li><a href="#"><span class="city">Dordrecht</span> <span class="address">Station NS - antwerpsestraat 5</span> <span class="value">DE</span></a></li>
    <li><a href="#"><span class="city">Zwijndrecht</span> <span class="address">Station NS - Koningsweg 5</span> <span class="value">DE</span></a></li>
    <li><a href="#"><span class="city">Den Haag</span> <span class="address">Station NS - blaatstraat 5</span> <span class="value">DE</span></a></li>
  </ul>
</dd>
</dl>

CSS

.dropdown { float: left; margin-right: 20px; }
.dropdown > dt {
  display: inline;
}

.dropdown > dd {
  position:relative;
}

.dropdown a {
  background: #fff; 
  display:inline-block; 
  padding-right:20px;
  border:1px solid #666; 
  width: 200px; 
  padding:3px;
  line-height: 1em;
  height: 1.875em;
  color:#333;
  text-decoration: none;
  overflow: hidden;
}

.dropdown a:hover, .dropdown a:focus {
  color: #333; 
}

.dropdown li > a {
  background: #fff;
  border: 0;
} 

.dropdown li > a:hover, .dropdown li > a:focus {
  background: #F2F7FA;
}

.dropdown span {
  display:block;
}

.dropdown .value { 
  display:none;
}

.city {
  font-weight: bold;
}

.address {
  font-size: .9em;
}

.dropdown dd > ul { 
  background: #fff; 
  border: 1px solid #666; 
  display: none;
  position: absolute; 
  top: 2px; 
  width: auto;
  min-width: 200px;
}

JavaScript

$(".dropdown > dt a").click(function (e) {
    var $ul = $(this).parent().next().find('> ul').toggle();
    $('.dropdown ul').not($ul).hide();
    e.preventDefault();
  });

  $(".dropdown > dd a").click(function (e) {
    var text = $(this).html();
    $(this).closest('dl').find('dt a').html(text);
    $(this).closest('ul').hide();
    e.preventDefault();
  });

  $(document).mouseup(function (e) {
    if ($(".dropdown > dd ul").is(":visible") && $(e.target).parents('.dropdown').length == 0) {
      $(".dropdown > dd ul").hide();
    }
  });