JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://s3.amazonaws.com/codecademy-content/courses/ltp2/css/bootstrap.min.css">
        <div class="articles container">
      
      <div class="article current">
        <div class="item row">
          <div class="col-xs-3">
            <p class="source">FLIGHT</p>
          </div>
          <div class="col-xs-6">
            <p class="title">Embraer adds third Legacy 500 prototype to flight test campaign</p>
          </div>
          <div class="col-xs-3">
            <p class="pubdate">Mar 23</p>
          </div>
        </div>
        <div class="description row">
          <div class="col-xs-3">&nbsp;</div>
          <div class="col-xs-6">
            <h1>Embraer adds third Legacy 500 prototype to flight test campaign</h1>
            <p>The third Legacy 500 has joined Embraer's flight test programme aimed at delivering the midsize business jet in 2014. The airtcraft, serial number 003...</p>
          </div>
          <div class="col-xs-3">&nbsp;</div>
        </div>
      </div>

      <div class="article">
        <div class="item row">
          <div class="col-xs-3">
            <p class="source">AW Commercial Aviation</p>
          </div>
          <div class="col-xs-6">
            <p class="title">CSeries Supplier Scramble</p>
          </div>
          <div class="col-xs-3">
            <p class="pubdate">Mar 22</p>
          </div>
        </div>
        <div class="description row">
          <div class="col-xs-3">&nbsp;</div>
          <div class="col-xs-6">
            <h1>CSeries Supplier Scramble</h1>
            <p>Three months before the planned first flight of its CSeries, Bombardier is grappling with supplier issues crucial to meeting its production cost...</p>
          </div>
            <div class="col-xs-3">&nbsp;</div>
        </div>
      </div>

      <div class="article">
        <div class="item row">
          <div class="col-xs-3">
            <p class="source">AW Commercial Aviation</p>
         ...

CSS

body {
  background: url('http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/uber/black-thread.png');
    }
.articles_title {
   color:white;
   font-size: 250%;
   position: fixed;
   top: 30px;
   right: 50%;
}
p {
  margin: 0;
}

.row {
  margin: 0;
}

.articles {
  margin-top: 16px;
  margin-bottom: 16px;
}

.article {
  color: #222;
  background: rgba(255,255,255,.9);
  border-spacing: 2px;
  border-color: gray;
  font-family: arial,sans-serif;
  border-bottom: 1px #e5e5e5 solid;
}

.current .item {
  background: rgba(206,220,206,.9);
}

.item {
  cursor: pointer;
  padding-top: 7px;
  padding-bottom: 7px;
  
}

.item .source {
  margin-left: 16px;
}

.item .title {
  font-weight: bold;
}

.item .pubdate {
  margin-right: 16px;
}

.item .pubdate {
  text-align: right;  
}

.description {
  display: none;
  padding-top: 10px;
  padding-bottom: 10px;
}

.description h1 {
  margin-top: 0px;
  font-size: 16px;
}
/* the index.php css */

body {
  left: 0;
  margin: 0;
  overflow: hidden;
  position: relative;
}

/* Initial menu */
.menu {
  background: url('http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/uber/black-thread.png') repeat left top;
  left: -285px;  /* start off behind the scenes */
  height: 100%;
  position: fixed;
  width: 285px;
}
/* Basic styling */

.jumbotron {
  background-image: url('http://i.imgur.com/JvdPG8h.png?1'); 
  height: 100%;
  -webkit-background-size: cover;
     -moz-background-size: cover;
       -o-background-size: cover;
          background-size: cover;
}

.menu ul {
  border-top: 1px solid #636366;
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu li {
  border-bottom: 1px solid #636366;
  font-family: 'Open Sans', sans-serif;
  line-height: 45px;
  padding-bottom: 3px;
  padding-left: 20px;
  padding-top: 3px;
}

.menu a {
  color: #fff;
  font-size: 15px;
  text-decoration: none;
  text-transform: uppercase;
}

.icon-close {
  cursor: pointer;
  padding-left: 10px;
  padding-top:...

JavaScript

var main = function() {
 $('.article').click(function() {
     $('.article').removeClass('current');
     $('.description').hide();
     
     $(this).addClass('current');
     $(this).children('.description').show();
});

$(document).keypress(function(event) {
      if(event.which === 111) {
    $('.current').children('.description').toggle();
  }
    else if(event.which === 110) {

  var currentArticle = $('.current');
  var nextArticle = currentArticle.next();

  currentArticle.removeClass('current');
  nextArticle.addClass('current');
}

});

};

$(document).ready(main);