JSFiddle - React, Tailwind, and code Playground

by Zonedark

HTML

<div class="selector">
  <span>SĂ©lectionnez un titre restaurant</span>
  <div class="chevron">
  </div>
</div>

<div class="choices">
  <div class="choice">
  <span>Test1</span>
  </div>
  <div class="choice">
    <span>Test1</span>
  </div>
</div>

CSS

.selector{
  width:80%;
  height:40px;
  line-height:40px;
  vertical-align:middle;
  border: solid 1px orange;
  margin:auto;
  position:relative;
  border-radius:3px;
}
.selector span{
  padding-left:5%;
}
.chevron{
  position:absolute;
  right:0;
  top:0;
  width:17%;
  background-color:red;
  height:100%;
}
.choices{
  width:80%;
  margin:auto;
  border:solid 1px blue;
  margin-top:5%;
  border-radius:3px;
}
.choice{
  width:100%;
  height:40px;
  vertical-align:middle;
  line-height:40px;
}
.choice:not(:last-child){
  border-bottom:solid 2px lightgrey;
}
.choice span{
  padding-left:60px;
}