JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">
<div class="col-md-4 dropdown">
  <h2 class="dd_text">Vegetables</h2>
  <div class="btn-group" id="mydropdown">

    <!-- toggle dropdown button -->
    <button class="btn btn-light" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      <img src="https://cdn4.iconfinder.com/data/icons/miscellaneous-81-solid/128/salad_vegetable_plate_leaf_menu_diet_healthy_editable_food_fresh_fruits_green_-512.png" width="30" height="30" alt="vegetable">
    </button>

    <!-- dropdown menu -->
    <div class="dropdown-menu force-scroll" aria-labelledby="dropdownMenuButton">
      <label class="pure-material-checkbox">
        <input type="checkbox" name="brinjal" value="brinjal" /><span>Brinjal</span>
      </label>
      <label class="pure-material-checkbox">
        <input type="checkbox" name="potato" value="potato" /><span>Potato</span>
      </label>
      <label class="pure-material-checkbox">
        <input type="checkbox" name="tomato" value="tomato" /><span>Tomato</span>
      </label>
      <label class="pure-material-checkbox">
        <input type="checkbox" name="capsicum" value="capsicum" /><span>Capsicum</span>
      </label>
      <label class="pure-material-checkbox">
        <input type="checkbox" name="onion" value="onion" /><span>Onion</span>
      </label>
    </div>

  </div>
</div>

CSS

.btn {
  width: 300px;
  outline: none;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-menu {
  width: 100%;
  transform: translate3d(0px, 85px, 0px) !important;
}

label {
  display: inline-block;
  width: 49%;
}

input {
  margin: 5px;
}

.force-scroll {
  overflow-y: scroll;
  width: 300px;
}