JSFiddle - React, Tailwind, and code Playground

HTML

<br><div>Выпадающие сиськи</div><br>
<div class=body>
  <input list="a" value="lorem ipsum">
  <datalist id=a></datalist>
  <div class=array>▼</div>
</div>
<div id=list></div>

CSS

div, input{
  padding: 0; margin: 0; top: 0; left: 0;
  border: none;
  font-family: Arial; font-size: 14px; line-height: 0;
  color: rgba(0, 0, 0, 0.75);
  box-sizing: border-box;
}

.body{
  width: 258px; height: 50px; padding: 1px;
  /**/
  box-shadow: 1px 0 rgba(0, 0, 0, 0.15),
              0 1px rgba(0, 0, 0, 0.15),
              -1px 0 rgba(0, 0, 0, 0.15),
              0 -1px rgba(0, 0, 0, 0.15);
  border-radius: 2px; /* не работает с border и outline */
}

input[list=a]{
  width: 208px; height: 48px; padding-left: 16px;
}

.array{
  width: 48px; height: 48px; float: right;
  text-align: center; line-height: 48px;
  background: rgba(255, 255, 255, 0.9); color: rgba(0, 0, 0, 0.5);
  box-shadow: 1px 0 rgba(0, 0, 0, 0.1) inset;
  cursor: pointer;
} .array:hover{
  background: rgba(255, 255, 255, 0.5);
  color: inherit;
}

/**/

#list{
  width: 256px; height: 240px; 
  margin: 2px 0 0 1px;
  background: white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  overflow-x: hidden; overflow-y: auto;
}

.list{
  width: 100%; height: 48px;
  padding: 0 8px 0 16px;
  box-shadow: 0 -1px rgba(0, 0, 0, 0.1) inset;
  line-height: 48px;
  overflow: hidden; cursor: pointer;
} .list:hover{
  background: rgba(0, 0, 0, 0.05); 
  box-shadow: 0 -1px rgba(0, 0, 0, 0.15) inset;
}

/* скроем стандартную стрелку */
input::-webkit-calendar-picker-indicator {
	display: none;
}

JavaScript

var a = ['плоские', 'маленькие', 'средние', 'большие', 'подтянутые', 'обвисшие', 'с маленькими сосками', 'с большими сосками', 'гладкие', 'с пупырышками', 'чувствительные', 'нечувствительные'];
var b = [];
var i = 0;

$('#list').hide();

$.each(a, function(i){
	$('<option value="'+a[i]+'">').appendTo('#a');
  b[i] = '<div class="list '+i+'">'+a[i]+'</div>';
  /* второй класс для уникального id, иначе не будет
  показывать значение нажатого div */
});
$('#list').html(b);

$('[list="a"]').focus(function(){
	$('[list="a"]').val('');
});

$('.list').click(function(){
	$('[list=a]').val($(this).html());
  turn();
});

function turn(){
	$('.array').html('▼');
  $('#list').slideUp(200);
  i = 0;
};

$('.array').click(function(){
	if(i==0){
		$(this).html('▲');
    $('#list').slideDown(200);
    i = 1;
  } else {
  	turn();
  };
});