JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<div class="container">
  <div class="sidebar">
    <input placeholder="Autocomplete from the list" data-bind="textInput: filter" />

    <ul id="menu" data-bind="foreach: filteredItems">
      <li data-bind="text: title,click: $parent.setLoc"></li>
    </ul>
  </div>
  <div id="map">

  </div>
</div>
<script>
var map;

var locations = [{
  title: 'White Tower',
  location: {
    lat: 40.626446,
    lng: 22.948426
  }
}, {
  title: 'Museum of Photography',
  location: {
    lat: 40.632874,
    lng: 22.935479
  }
}, {
  title: 'Teloglion Fine Arts Foundation',
  location: {
    lat: 40.632854,
    lng: 22.941567
  }
}, {
  title: 'War Museum of Thessaloniki',
  location: {
    lat: 40.624308,
    lng: 22.95953
  }
}, {
  title: 'Jewish Museum of Thessaloniki',
  location: {
    lat: 40.635132,
    lng: 22.939538
  }
}];

window.initMap = function () {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {
      lat: 40.6401,
      lng: 22.9444
    },
    zoom: 14
  });
  for (var i = 0; i < locations.length; i++) {
    // Get the position from the location array.
    var position = locations[i].location;
    var title = locations[i].title;
    // Create a marker per location, and put into markers array.
    var marker = new google.maps.Marker({
      position: position,
      title: title,
      map: map,
      animation: google.maps.Animation.DROP,
      id: i
    });
    locations[i].marker = marker;
  };

  ko.applyBindings(new ViewModel())
};

var Loc = function(data) {
  this.title = data.title;
  this.location = data.location;
  this.marker = data.marker;
};

var ViewModel = function() {
  var self = this;

  self.listLoc = ko.observableArray();

  locations.forEach(function(locItem) {
    self.listLoc.push(new Loc(locItem))
  });

  self.filter = ko.observable('');

  self.filteredItems = ko.computed(function() {
    var filter =...

CSS

html,
  body {
    width: 100%;
    height: 100%;
  }
  
  .container {
    width: 100%;
    height: 100%;
    display: flex;
  }
  
  .sidebar {
    width: 20%;
  }
  
  #map {
    width: 80%;
  }