Tengo una etiqueta de lista de datos que contiene algunos datos mediante el uso de etiquetas de opción. Sin embargo, los datos son realmente largos y las opciones están causando problemas de altura en mi página. Por favor ayuda.

CÓDIGO HTML

 <div class="col-md-3"> <label class="definer" for="currency" style="height: 125px;" > Which currency would you like to see flight ticket prices in? </label> <input type="search" list="currency" class="f_input" placeholder="Please select a currency" id="currencyInput" style="text-transform: uppercase;"> <datalist id="currency" class="f_input"> </datalist> </div>

CÓDIGO JAVASCRIPT

 xhrCurrencyCodes.addEventListener("readystatechange", function () { if (this.readyState === this.DONE) { var currencyObj = JSON.parse(this.responseText) console.log(currencyObj); for (let i = 0; i < currencyObj.Currencies.length; i++) { var myCurrency = document.createElement('option') var myCurrencyList = document.getElementById('currency') myCurrency.value = currencyObj.Currencies[i].Code + " (" + currencyObj.Currencies[i].Symbol + ")" myCurrencyList.append(myCurrency) }