FMS Addons Mockup

by skibulk

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-xs-12">
      <table id="add-on-picker">
        <tr class="row-header">
          <td class="col-left">
          <h3>Granola <span>/ $3.00</span></h3>
          </td>
          <td class="col-right">
            <button class="btn btn-default" type="button" data-toggle="collapse" data-target=".addon1">Details</button>
            <button class="btn btn-default" type="button">Order</button>
          </td>
        </tr>
        <tr class="row-details">
          <td class="col-left">
            <div class="collapse addon1">
              <p>Curabitur hendrerit nunc arcu, vitae eleifend lacus rutrum sed. Pellentesque mauris eros, tincidunt nec velit vitae, ullamcorper ultrices diam. Duis et ipsum vitae est ultrices vulputate. Duis blandit dui sed sapien aliquam, sit amet blandit leo lobortis.</p>
            </div>
          </td>
          <td class="col-right">
            <div class="collapse addon1">
              <img src="http://placehold.it/112x112"/>
            </div>
          </td>
        </tr>

        <tr class="row-header">
          <td class="col-left">
            <h3>Yogurt <span>/ $3.00</span></h3>
          </td>
          <td class="col-right">
            <button class="btn btn-default" type="button" data-toggle="collapse" data-target=".addon2">Details</button>
            <button class="btn btn-default" type="button">Order</button>
          </td>
        </tr>
        <tr class="row-details">
          <td class="col-left">
            <div class="collapse addon2">
              <p>Curabitur hendrerit nunc arcu, vitae eleifend lacus rutrum sed. Pellentesque mauris eros, tincidunt nec velit vitae, ullamcorper ultrices...

CSS

#add-on-picker {
  width: 100%;
}

#add-on-picker .row-details {
  border-bottom: 1px solid black;
}

#add-on-picker h3 span {
  font-size: 0.6em
}

#add-on-picker .col-right{
  width: 1%;
  white-space: nowrap;
}

#add-on-picker img {
  width:100%;
}