<div class="kapsul">
  <div class="bir">
    <h2>Normal</h2>
    <select>
  <option>Short Option</option>
  <option>Longer Option</option>
  <option>Extra Long Option With Many Words</option>
</select>
  </div>
  <div class="iki">
    <h2>field-sizing: content;</h2>
    <select name="icerik">
  <option>Short Option</option>
  <option>Longer Option</option>
  <option>Extra Long Option With Many Words</option>
</select>
  </div>
</div>

@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700,800,900&display=swap');

.kapsul {
  width: 550px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
}

select[name="icerik"] {
  field-sizing: content;
}
















* {
  margin: 0;
  padding: 0;
  outline: 0;
}

body,
textarea {
  font-family: 'Poppins', sans-serif;
}