JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
   <meta name="author" content="Yami Medina">
   <meta name="description" content="Find artists like the ones you already like!">
   <title>What Do I Listen To Today?</title>
   <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0">

   <link rel="stylesheet" href="style.css" />
   </head>
  <body>

  <script src="../bundle.js"></script>
  <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
  <div class="container">
  <div id="left">
   <div id="header">
      <h1>What Do I Listen To Today?</h1>
   </div>

    <input type="text" id="originalartist">

    <button id="search">Search</button>

    <h2>If you like this artist...</h1>
    <div id="artist"></div>

<!--    <div id="email">-->
<!--     <input type="text" id="emailaddress" placeholder="[email protected]">-->
<!--     <button id="emailbutton">Get this list emailed to you!</button>-->
<!--     </div>-->
     <div id="footer">
     Created by <a href="http://www.yamilethmedina.com">Yami Medina</a>
   </div>
    </div>
    <div id="right">
    <h2>You might like these related artists:</h2>
    <div id="related-artist">
        <!-- <div id="related-artist-track"></div> -->
    </div>



   </div>

  </body>
  </html>

CSS

body {
    font-family: Candara,Calibri,Arial,sans-serif;
    background-color: #ededff;
    color: #101101;

}


h1 {
    font-size: 30px;
    color: #b04d5f;
}

h2 {
    font-size: 18px;
    color: #b04d5f;
}

#container {
    margin: auto;
    overflow: auto;
}

/*p {*/
/*    color: #b04d5f;*/
/*    width: 300px;*/
/*    height: 250px;*/
/*    margin: 5px;*/
/*    padding: 15px;*/
/*    float: right;*/
/*    position: fixed;*/
/*}*/


.cover {
    width: 300px;
    height: 300px;
    display: inline-block;
    background-size: cover;
}

#header {

}

#footer {
    font-size: 10px;
    color: #c2c2f0;
    clear: both;
}

#left {
    width: 250px;
    height: 250px;
    margin: 5px;
    padding: 15px;
    float: left;
   
}

#right {
    width: 300px;
    height: 250px;
    margin: 5px;
    padding: 15px;
    float: right;
   
}

.media {
    padding: 10px;
}
.media, .media-body {
    overflow:hidden; 
    _overflow:visible; 
    zoom:1;
}

.related-artists {
    float:left; 
    margin-right: 10px; 
    background-size: 100px;
}

button {
  font-family: Candara,Calibri,Arial,sans-serif;
  color: #f8fff4;
  font-size: 14px;
  background: #b04d5f;
  
  text-decoration: none;
  font-weight: bold;
}

button:hover {
  background: #c591ab;
  text-decoration: none;
}

a:link {
    color: indigo;    
}

#email {
    padding-bottom: 20px;
}

JavaScript

var $ = require('jquery');
var Spotify = require('../node_modules/spotify-web-api-js');
var s = new Spotify();




$(document).ready(function($) {
  window.addEventListener('click', function() {
    var searchButton = document.getElementById('search');
    //console.log(searchButton);
    getOriginalArtist();
  });

});

function getOriginalArtist() {
  var originalArtist = document.getElementById('originalartist').value;
  console.log(originalArtist);
  searchArtists(originalArtist);
}

var originalArtistId;
var relatedArtistId;
var relatedArtistsObject = {};


var i;
var k;
function searchArtists(originalArtist) {


  $.getJSON("https://api.spotify.com/v1/search?type=artist&q=" + originalArtist, function(json) {
   $('#artist').html('<p>'+ '<img src="' + json.artists.items[0].images[2].url + '" height="100" width="100" /> ' + json.artists.items[0].name +'</p>');

    originalArtistId = json.artists.items[0].id;

     s.getArtistRelatedArtists(originalArtistId, function(err, data) {

      for (i = 0; i < data.artists.length; i++)
      {
          console.log(data.artists[i].name);
          relatedArtistsObject[data.artists[i].id] = {
            name: data.artists[i].name,
            songs: []
          };
          s.getArtistTopTracks(data.artists[i].id, "US", function (err, data2) {
              if (relatedArtistsObject[data2.tracks[0].artists[0].id] !== undefined)
              {
              // console.log(data2.tracks[0].name); -- this outputs the song titles I want
                relatedArtistsObject[data2.tracks[0].artists[0].id].songs.push(data2.tracks[0].name);

              }
          });
      }
     console.log(relatedArtistsObject);
     // loop through this object and print it through the screen
     for (k = 0; k < relatedArtistsObject.length; k++)
     {

       console.log(relatedArtistsObject.id.songs[0].name);
       $('#related-artist').append(relatedArtistsObject[k]);

     }
    // ...