html css drop-down-menu jquery-ui-selectmenu

How to adjust the height of each row of the dropdown list based on the content of the second column?

I created a dropdown list using the selectMenu jQuery widget and then created a dropdown component using it in the Angular so that I'm able to reuse the same component. Now, the problem which I am facing is that the dropdown list consists of 3 columns and the 2nd column contains the main content of each row. Now, whenever I am increasing the size (length) of the content to be put in the 2nd column, the heights of other two columns of each row are not adjusted dynamically. I'm confused on how to fix this issue? Given below is the image of the dropdown list, which I have created, with the unadjusted height of the row.

Here is the link to the codepen page with the example and the code which I have used: Codepen Dropdown link. I tried fixing this issue by using display:table-cell; in CSS file but my effort went in vain. Please suggest how to fix this issue. Moreover. here is the output which I desire.

Given below is the code snippet.

$(function() {
  $.widget("custom.mySelectMenu", $.ui.selectmenu, {
    _renderMenu: function(ul, items) {
      var that = this,
        currentCategory = "";
      $.each(items, function(index, item) {
        var li, name, short, price;
        if (item.optgroup != currentCategory) {
          ul.append(
            "<li class='ui-selectmenu-category'>" +
            item.optgroup +
            "</li>"
          );
          currentCategory = item.optgroup;
        }
        li = that._renderItemData(ul, item);
        console.log(ul);
        name = li.text();
        short = item.element.data("short");
        price = item.element.data("price");
        console.log(li, short, price);
        li.prepend(
          $("<span>", {
            class: "short"
          }).html(short)
        );

        li.append(
          $("<span>", {
            class: "price"
          }).html(price)
        );
        if (item.optgroup) {
          li.attr("aria-label", item.optgroup + " : " + item.label);
        }
      });
    }
  });

  $("#options").mySelectMenu({
    width: 300
  });
  $("#options")
    .mySelectMenu("menuWidget")
    .addClass("overflow");
});

.ui-selectmenu-category {
  color: #5f5f5f;
  padding: 0.5em 0.25em;
  min-width: 290px;
}

.ui-selectmenu-category::after {
  content: "PRICE";
  float: right;
  padding-right: 40px;
}

.ui-menu-item .ui-menu-item-wrapper {
  display: inline-block;
  padding: 1em 2px;
}

.ui-menu-item .ui-menu-item-wrapper.ui-state-active {
  margin: 0;
  border-width: 1px 0px 1px 0px;
  border-color: #cccccc;
  background-color: #e4ebf1;
  color: #000;
}

.ui-menu-item .ui-menu-item-wrapper.ui-state-active.short {
  color: #2e6d99;
}

.ui-menu-item div.ui-menu-item-wrapper {
  width: 290px;
}

.ui-menu-item .short {
  color: #2e6d99;
  font-weight: strong;
  width: 30px;
  padding-left: 0.5em;
  position: absolute;
}

.ui-menu-item .price {
  font-weight: strong;
  width: 75px;
  margin-right: -6px;
}

.overflow {
  height: 200px;
}

<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Selectmenu - Custom Rendering</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>

<body>
  <label for="options">Select an Option:</label>
  <select id="options">
  <optgroup label="PREFERRED OPTIONS">
    <option data-short="L" data-price="$0.00">Standard Screw Adjustment dkjsahdksajd sdhsdl sdshad ;sldh sd;lsa d;lsajd</option>
    <option data-short="K" data-price="$0.00">Standard Screw Adjustment</option>
  </optgroup>
  <optgroup label="STANDARD OPTIONS">
    <option data-short="C" data-price="$5.00" >Tamper Resistant - Factory Set</option>
    <option data-short="K" data-price="$6.00" >Handknob</option>
  </optgroup>
  <optgroup label="ADDITIONAL OPTIONS">
    <option data-short="F" data-price="$4.00">Hex Head Screw with Locknut</option>
    <option data-short="G" data-price="$4.00">Hex Head Screw with Locknut</option>
    <option data-short="H" data-price="$4.00" >Hex Head Screw with Locknut</option>
  </optgroup>
</select>

</body>

</html>

Solution

You can do it using with display:table and display:table-cell

$(function() {
  $.widget("custom.mySelectMenu", $.ui.selectmenu, {
    _renderMenu: function(ul, items) {
      var that = this,
        currentCategory = "";
      $.each(items, function(index, item) {
        var li, name, short, price;
        if (item.optgroup != currentCategory) {
          ul.append(
            "<li class='ui-selectmenu-category'>" +
              item.optgroup +
              "</li>"
          );
          currentCategory = item.optgroup;
        }
        li = that._renderItemData(ul, item);
        console.log(ul);
        name = li.text();
        short = item.element.data("short");
        price = item.element.data("price");
        console.log(li, short, price);
        li.prepend(
          $("<span>", {
            class: "short"
          }).html(short)
        );

        li.append(
          $("<span>", {
            class: "price"
          }).html(price)
        );
        if (item.optgroup) {
          li.attr("aria-label", item.optgroup + " : " + item.label);
        }
      });
    }
  });

  $("#options").mySelectMenu({
    width: 300
  });
  $("#options")
    .mySelectMenu("menuWidget")
    .addClass("overflow");
});

.ui-menu .ui-menu-item { 
  display:table; width:100%;
}
.ui-menu .ui-menu-item-wrapper {
    position: relative;
    padding: 3px 1em 3px .4em;
    border-width: 1px 0 1px 0;
    border-color: transparent;
    border-style: solid;
}
.ui-selectmenu-category {
  color: #5f5f5f;
  padding: 0.5em 0.25em;
  min-width: 290px;
}

.ui-selectmenu-category::after {
  content: "PRICE";
  float:right;
  padding-right: 40px;
}

.ui-menu-item .ui-menu-item-wrapper {
  display: table-cell;
  vertical-align:top
  padding: 1em 2px;
}


.ui-menu-item .ui-menu-item-wrapper.ui-state-active {
  margin: 0;
    border-width: 1px 0px 1px 0px;
    border-color: #cccccc;
    background-color: #e4ebf1;
    color: #000;
}

.ui-menu-item .ui-menu-item-wrapper.ui-state-active.short {
  color: #2e6d99;
  
}

.ui-menu-item div.ui-menu-item-wrapper {
  width: 290px;
  
}

.ui-menu-item .short {
  color: #2e6d99;
  font-weight: strong;
  width: 30px;
  padding-left: 0.5em;
  position:absolute;

}

.ui-menu-item .price {
  font-weight: strong;
  width: 75px;
  margin-right: -6px;
 
}


.overflow {
  height: 200px;
}

<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Selectmenu - Custom Rendering</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>

<body>
  <label for="options">Select an Option:</label>
    <select id="options">
  <optgroup label="PREFERRED OPTIONS">
    <option data-short="L" data-price="$0.00">Standard Screw Adjustment dkjsahdksajd sdhsdl sdshad ;sldh sd;lsa d;lsajd</option>
    <option data-short="K" data-price="$0.00">Standard Screw Adjustment</option>
  </optgroup>
  <optgroup label="STANDARD OPTIONS">
    <option data-short="C" data-price="$5.00" >Tamper Resistant - Factory Set</option>
    <option data-short="K" data-price="$6.00" >Handknob</option>
  </optgroup>
  <optgroup label="ADDITIONAL OPTIONS">
    <option data-short="F" data-price="$4.00">Hex Head Screw with Locknut</option>
    <option data-short="G" data-price="$4.00">Hex Head Screw with Locknut</option>
    <option data-short="H" data-price="$4.00" >Hex Head Screw with Locknut</option>
  </optgroup>
</select>
</body>
</html>