कैसे की व्यवस्था करने के लिए बूटस्ट्रैप अलर्ट, दो स्तंभों में?

$(document).ready(function() {
  $('.btn-addmember').click(function() {
    if ($('#text').val().length != 0) {
      var x = $('#memberlist').html();
      var y =
        `<div class="alert alert-success alert-dismissible fade in">
        <a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
                            ` + $('#text').val() + `</div>`;
      $('#memberlist').html(y + x);
      $('#text').val("");
    } else alert("Please, enter the name of the member");
  });
  
  //Adding members of team1
  $('.btn-team1').click(function() {
    if ($('#team1').val().length != 0) {
      var members = $('#team1').val().split('\n');

      for (var i = 0; i < members.length; i++) {
        var x = $('#memberlist').html();
        var y =
          `<div class="col-sm"><div class="alert alert-success alert-dismissible fade in">
                                        <a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
                                        <b>` + members[i] + `</b></div></div>`;
        if (members[i].trim().length > 0) {
          $('#memberlist').html(y + x);
        }
      }
    }
  });

  //Adding members of team2
  $('.btn-team2').click(function() {
    if ($('#team2').val().length != 0) {
      var members = $('#team2').val().split('\n');

      for (var i = 0; i < members.length; i++) {
        var x = $('.container').html();
        var y =
          `<div class="alert alert-success alert-dismissible fade in">
                                        <a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
                                        <b>` + members[i] + `</b></div>`;
        if (members[i].trim().length > 0) {
          $('.container').html(y + x);
        }
      }
    }
  });
  // When Member is clicked
  $(document).on('click', '.alert', function() {
    if ($(this).css('text-decoration-line') == "none") {
      $(this).css('text-decoration-line', 'line-through');
      $(this).css('background-color', '#dddddd');
      $(this).css('border-color', '#dddddd');
    } else {
      $(this).css('text-decoration-line', 'none');
      $(this).css('background-color', '#dff0d8');
      $(this).css('border-color', '#d6e9c6');
    }
  });
});

.container {
  width: 80%;
  height: auto;
}

.foot {
  position: fixed;
  left: 10%;
  bottom: 0;
  width: 80%;
  text-align: center;
}

.form-group {
  height: 0px;
  visibility: hidden;
}

.copyright {
  width: 100%;
  text-align: right;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<center>

  <div class="foot">
    <div class="row">
      <div class="col-sm-1"> </div>
      <div class="col-sm-10">
        <!-- Input for members -->
        <div class="input-group">
          <input type="text" class="form-control" placeholder="Add member" id="text">
          <div class="input-group-btn">
            <button class="btn btn-success btn-addmember">
                <i class="glyphicon glyphicon-plus">
                </i></button>
          </div>
          <div class="input-group-btn">
            <button class="btn btn-success btn-team1">
                <i class="glyphicon glyphicon-plus">
                </i> TEAM1</button>
          </div>
          <div class="input-group-btn">
            <button class="btn btn-success btn-team2">
                <i class="glyphicon glyphicon-plus">
                </i> TEAM2</button>
          </div>
        </div>
        <br>
        <br>
      </div>
    </div>
    <div class="form-group">
      <label for="exampleFormControlTextarea1">Team1</label>
      <textarea class="form-control" id="team1" rows="3">
        vivamus eget 
        lacus vitae 
        mi vulputate 
        varius integer 
        suscipit orci 
        condimentum
        vestibulum
        </textarea>
      <label for="exampleFormControlTextarea1">Team2</label>
      <textarea class="form-control" id="team2" rows="3">
        vivamus eget 
        lacus vitae 
        mi vulputate 
        varius integer 
        suscipit orci 
        condimentum
        vestibulum
        </textarea>
    </div>
    <p class="copyright">Created by: Me - <a href="mailto:[email protected]">[email protected]</a></p>
  </div>

  <br>
  <h2 class="text text-success">Team Members</h2>
  <br>

  <div class="container-fluid">
    <div id="memberlist" class="row">

    </div>
  </div>
</center>