How do I avoid tags wrapping and display the tags in one line using jQuery TagIt plugin?

I want to avoid tags wrapping and display the tags in one line using jQuery TagIt plugin.
I created a TagIt input element using steps in this repository.

Here is my preview:

But I want it to display all the tags in a single line without wrapping and maybe use a scroll bar instead.

Minimal reproduceable example:

<!doctype html>
<html lang="en" class="h-100">

<head>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js"></script>
  <script src="https://cdn.jsdelivr.net/gh/aehlke/[email protected]/js/tag-it.js"></script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jquery-ui-bootstrap/jquery-ui-bootstrap/css/custom-theme/jquery-ui-1.10.3.custom.css">
  <link href="https://cdn.jsdelivr.net/gh/aehlke/tag-it/css/jquery.tagit.css" rel="stylesheet">
  <script type="text/javascript">
    $(document).ready(function() {
      $("#mintTags").tagit();
    });
  </script>
</head>

<body>
  <input type="hidden" name="mint-numbers" id="mintTags">
</body>

Solution

You could add a display flex to the tagit ul element.

Here is an example of css that will make the list scrollable, depending on the new input class (tagit-nowrap).

<!doctype html>
<html lang="en" class="h-100">

<head>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js"></script>
  <script src="https://cdn.jsdelivr.net/gh/aehlke/[email protected]/js/tag-it.js"></script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jquery-ui-bootstrap/jquery-ui-bootstrap/css/custom-theme/jquery-ui-1.10.3.custom.css">
  <link href="https://cdn.jsdelivr.net/gh/aehlke/tag-it/css/jquery.tagit.css" rel="stylesheet">
  <script type="text/javascript">
    $(document).ready(function() {
      $("#mintTags").tagit();
    });
  </script>
  <style>
     .tagit-nowrap + .tagit{
      display: flex;
     }
  </style>
</head>

<body>
  <input class="tagit-nowrap" type="hidden" name="mint-numbers" id="mintTags">
</body>