alignment issue - 224

by Joe

HTML

<html>

  <head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  </head>

  <body>
    <div class="row">
      <div class="col-6">
        <input class="form-control serch" id="supSearch" type="search" placeholder="Search..">
        <div class="selector">
          <!--  Green -->
          <span id="activeSpn" aria-label="Active Now" style="display: inline-block; background: rgb(66, 183, 42) none repeat scroll 0% 0%; border-radius: 50%; height: 10px; margin-left: 4px; width: 10px;"></span>

          <!-- red -->
          <span id="inActiveSpn" aria-label="inActive" style="display: inline-block; background: red none repeat scroll 0% 0%; border-radius: 50%;  height: 10px; margin-left: 4px; width: 10px;"></span>


          <select class="col-12 listbox" name="List_0" size="20" id="list1" multiple="multiple">
            <option class="fa fa-address-card-o" value="Komal ">Komal </option>
            <option value="Ranjeet">Ranjeet</option>
            <option value="Vishal ">Vishal </option>
            <option value="Gaurav">Gaurav</option>
            <option value="Dhanpat">Dhanpat</option>
            <option value="joe">joe</option>
            <option value="Gowri">Gowri</option>
            <option value="shankar">shankar</option>
            <option value="tamil">tamil</option>
            <option value="raju">raju</option>
            <option value="sam">sam</option>
            <option value="jhon">jhon</option>
            <option value="sinns">sinns</option>
            <option...

CSS

option{
  width:100%;
}

.sch_submit {
  right: 0px !important;
  top: 13px;
}

.newSup {
  width: fit-content;
  position: relative;
  left: 40%;
}

.listbox {
  background: white;
  background: -webkit-linear-gradient(#ccc, white);
  background: -o-linear-gradient(#ccc, white);
  background: -moz-linear-gradient(#ccc, white);
  background: linear-gradient(#fff, white);
  border: 1px solid #ced4da;
  overflow: auto;
}

.listbox option {
  list-style: none;
  margin: 0;
  padding: 0;
}

.listbox option {
  padding: 10px;
  cursor: pointer;
}

.listbox option:hover {
  background-color: #bbb;
}

.listbox option.active {
  background: rgb(77, 176, 82);
}

option {
  -webkit-transition: background-color 200ms linear;
  -moz-transition: background-color 200ms linear;
  -o-transition: background-color 200ms linear;
  -ms-transition: background-color 200ms linear;
  transition: background-color 200ms linear;
}

.listbox::-webkit-scrollbar {
  width: 8px;
  border: 1px solid #ced4da;
}

.listbox::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.1);
}

.listbox::-webkit-scrollbar-thumb {
  background: gray;
}

.serch {
  width: 80%;
  position: relative;
  left: 60px;
}

#list1 {
  height: 440px;
  width: 100%;
  margin: 10px;
  text-align: center;
}

.selector {
  position: relative;
  left: 50px;
  margin-bottom: 20px;
}


.testClass {
      position: fixed;
    left: 60px;
    top: 510px;
}

JavaScript

$(document).ready(function() {
  $("#testId").keyup(function() {
    var x = document.getElementById('activeSpn');
    var y = document.getElementById('inActiveSpn');
    if ($(this).val() == "1") {
      x.style.display = 'block';
      y.style.display = 'none';
    } else {
      x.style.display = 'none';
      y.style.display = 'block';
    }
  });
});