Summary Section - Demo

HTML

<script src="http://fonts.googleapis.com/css?family=Roboto:400,900"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<hr style="height:100pt; visibility:hidden;" />
<div class="container summary">
    <div class="row">
        <div class="col-xs-1 section">
            <br>
            <p>Section
                <br> <span class="section-num">2.2</span>

                <br>Exercise</p>
        </div>
        <div class="col-xs-3">
            <br>
            <div class="row cb-btns-row " style="background-color:white;">
                <div class="col-xs-3 col-xs-3 col-md-3 col-lg-3">
                    <div id="dd" class="wrapper-dropdown-1" tabindex="1"> <span class="summary-texts">Group A </span>

                        <ul class="dropdown">
                            <li><a class="group" id="group-a">Group A </a>

                            </li>
                            <li><a class="group" id="group-b">Group B </a>

                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <p style="text-align: left;" class="summary-texts">
                <br>Problem set: Same
                <br>Start: 4/10/2015 2:00 pm</p>
        </div>
        <div class="col-xs-5">
            <br>
            <br>
            <br>
            <p style="text-align: left;" class="summary-texts">Students: 9/25
                <br>Due: 4/10/2015 3:00 pm</p>
        </div>
        <div class="col-xs-1 student-submit">
            <br> <span class="student-submit-num">9/9</span>

            <br>STUDENTS
            <br>SUBMITTED</div>
        <div class="col-xs-1 avg-score">
            <br> <span class="avg-score-num">71 <small>% </small> </span>

            <br>AVG SCORE</div>
        <div class="col-xs-1 hide-details">
            <br>
            <img...

CSS

body {
    font-size:14px;
}
.section-num {
    color: #293644;
    font-size: 39px;
    font-weight: bold;
    font-style: normal;
    font-family:"adelle-sans", sans-serif;
}
.section p {
    color: #273645;
    font-weight: bold;
    font-size: 11.8px;
    font-style: normal;
    text-align: left;
    text-transform: uppercase;
    font-family:"adelle-sans", sans-serif;
}
.section {
    border-right: 2px solid #c9cacb;
}
.summary {
    border: 1px solid #c9cacb;
    background-color: #F9F9F9;
}
.cb-btns-row {
    background-color: #F9F9F9!important;
}
.student-submit-num, .avg-score-num {
    color: #293644;
    font-size: 27.5px;
    text-align: center;
    font-weight: bold;
    font-style: normal;
    font-family:"adelle-sans", sans-serif;
}
.student-submit, .avg-score, .hide-details {
    font-size: 9.8px;
    color: #293644;
    font-style: normal;
    font-weight: bold;
    font-family:"adelle-sans", sans-serif;
    text-align:center;
}
.summary-texts {
    font-size: 16px;
    font-weight: 400;
    font-family:"jaf-facitweb", sans-serif;
}
/* GLOBALS */
 *, *:after, *:before {
    -webkit-box-sizing : border-box;
    -moz-box-sizing : border-box;
    box-sizing : border-box;
    padding : 0;
    margin : 0;
}
::selection {
    background: transparent;
}
::-moz-selection {
    background: transparent;
}
#dd {
    font-size: 12px;
}
.wrapper-dropdown-1 {
    position : relative;
    padding : 3px;
    background : white;
    color : black;
    outline : none;
    cursor : pointer;
    border-top : 1px solid black;
    border-right : 1px solid black;
    border-bottom : 1px solid black;
    border-left : 1px solid black;
    border-radius : 0;
    width : 200px;
    z-index : 99;
}
.wrapper-dropdown-1:after {
    font-family : FontAwesome;
    content :"\f054";
    width : 0;
    height : 0;
    position : absolute;
    right : 16px;
    top : 50%;
    margin-top : -8px;
}
.wrapper-dropdown-1 .dropdown {
    position : absolute;
    top : 100%;
    left :...

JavaScript

"use strict";

$(document).ready(function(){
    $('.row').each(function(){
        $(this).find('.section').css({'height':$(this).outerHeight()});
    });
});

  // dropDown Menu
  function dropDown(el) {

      this.dd = el;
      this.placeholder = this.dd.children('span');
      this.opts = this.dd.find('ul.dropdown > li');
      this.val = '';
      this.index = -1;
      this.initEvents();
  }

  dropDown.prototype = {

      initEvents: function () {
          var obj = this;

          obj.dd.on('click', function (event) {
              $(this).toggleClass('active');
              return false;
          });

          obj.opts.on('click', function () {
              var opt = $(this);
              obj.val = opt.text();
              obj.index = opt.index();
              obj.placeholder.text(obj.val);
          });
      },
      getValue: function () {
          return this.val;
      },
      getIndex: function () {
          return this.index;
      }
  }


  $(function () {
      var dd = new dropDown($('#dd'));
      $(document).click(function () {
          $('.wrapper-dropdown-1').removeClass('active');
      });
  });