$('#select').on('change', function() {
name = $('#select :selected').val();
//some code here
});
. bdr-txtline {
border-bottom: 1px solid black;
}
<div class="container">
<div class="row">
<div class="col-xs-4">
<div id="Name" class="bdr-txtline">
</div>
</div>
</div>
</div>
I have a dropdown on page1.html. When I select an option, the data is dynamically transferred to another page which has a bottom border line. The options in the dropdown have different lengths, some are short with 3 words and others are longer with 7 or 8 words. I would like the bottom border line to adjust accordingly, either increasing or decreasing in size.
How can I adjust the border-bottom line dynamically based on the text coming from the dropdown? Is it possible to set a range of widths for the border bottom line and make it responsive?