JSFiddle - React, Tailwind, and code Playground

by Slava Fomin II

HTML

<div class="container">
  <div class="dc-dropdown-select">
  
    <button class="dc-dropdown-select__button" type="button">
      <span class="dc-dropdown-select__button__title">
        Тип приобретаемой недвижимости
      </span>
      <div class="dc-dropdown-select__button__icons">
        <div class="dc-embed-icon"></div>
        <div class="dc-embed-icon"></div>
      </div>
    </button>
    
  </div>
</div>

CSS

.container {
  display: flex;
  border: 2px dashed deeppink;
  width: 150px;
}

.dc-dropdown-select {
  
  display: flex;
  min-width: 0;
  flex-grow: 1;
  
  border: 2px dashed black;
  height: 40px;
  
}

.dc-dropdown-select__button {
  
  display: flex;
  min-width: 0;
  
  align-items: center;
  flex-grow: 1;
  background: none;
  border: 1px solid black;
  padding: 0 8px;
  height: 40px;
  
}

.dc-dropdown-select__button__title {
  white-space: nowrap;
  border: 1px solid orange;
  overflow: hidden;
  text-overflow: ellipsis;
  height: 40px;
  line-height: 40px;
}

.dc-dropdown-select__button__icons {
  display: flex;
  margin-left: 16px;
}

.dc-embed-icon {
  width: 16px;
  height: 16px;
  background-color: #333;
  margin-left: 16px;
}

.dc-embed-icon:first-child {
  margin-left: 0;
}