JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2012.2.710/js/kendo.all.min.js"></script>
<input data-role="dropdownlist" data-bind="source: Test"/><br/>
<input data-role="combobox" data-bind="source: Test"/>

CSS

.k-dropdown {
    width:30%;                
}
.k-combobox {
    width:30%;                
}

JavaScript

var Lookups = {};
Lookups.Test = ["Value 1", "Value 2", "Value 3"];

kendo.bind($("input"), Lookups);

function adjustListWidth(myWidget) {
             var list = myWidget.list,
                width = list[0].style.width,
                wrapper = myWidget.wrapper,
                computedStyle, computedWidth;

            if (true) {
                computedStyle = window.getComputedStyle ? window.getComputedStyle(wrapper[0], null) : 0;
                computedWidth = computedStyle ? parseFloat(computedStyle.width) : wrapper.outerWidth();

                if (computedStyle && ($.browser.mozilla || $.browser.msie)) { // getComputedStyle returns different box in FF and IE.
                    computedWidth += parseFloat(computedStyle.paddingLeft) + parseFloat(computedStyle.paddingRight) + parseFloat(computedStyle.borderLeftWidth) + parseFloat(computedStyle.borderRightWidth);
                }

                width = computedWidth - (list.outerWidth() - list.width());
            }

            list.css({
                fontFamily: wrapper.css("font-family"),
                width: width
            });
   
}

var ddl = $('[data-role="dropdownlist"]').data("kendoDropDownList");
ddl.bind("open", function() {
    adjustListWidth(ddl);
});

var cb = $('[data-role="combobox"]').data("kendoComboBox");
cb.bind("open", function(){
    adjustListWidth(cb);
});