JSFiddle - React, Tailwind, and code Playground

HTML

<input id="inpt" type="text" placeholder="Type in here" />
<div id="inpt-width"></div>
		<select name="my_name" id="selCataMain" class="Header_Category_Search_Options1">
			<option value="People" selected="selected">People</option>
			<option value="Community">Community</option>
			<option value="Posts">Posts</option>
			<option value="News">News</option>
			<option value="Videos">Videos</option>
			<option value="BLogs">Blogs</option>
		</select>
    <div id="inpt-width2"></div>

JavaScript

$.fn.textWidth = function(text, font) {
    if (!$.fn.textWidth.fakeEl) $.fn.textWidth.fakeEl = $('<span>').hide().appendTo(document.body);
    $.fn.textWidth.fakeEl.text(text || this.val() || this.text()).css('font', font || this.css('font'));
    return $.fn.textWidth.fakeEl.width();
};
$('#selCataMain').on('change', function() {
    $('#inpt-width2').html($(this).textWidth() + 'px');
}).trigger('select');