Horizontal list inside panel-footer

Question

I've stuck for a long time at something pretty simple for some freaking reason.

I'm setting a bootstrap 3 layout and I want to style a panel footer according to my requirements. Unfortunately I'm having a hard time to put a horizontal ul inside the footer, with center aligned text in each li.

Here's the current code:

    h1 {
      font-size: 26px;
      font-weight: bold;
      margin: 5px;
      font-family: "Verdana";
    }
    h3 {
      text-transform: uppercase;
      font-size: 16px;
      font-weight: bold;
      font-family: "Arial";
      margin-top: 5px;
      margin-bot: 10px;
    }
    .trip-stats-list {
      margin: 0;
      padding: 0;
      list-style-type: none;
    }
    .trip-stats-list ul li {
      display: inline;
      border: 1px;
    }
    .panel-footer ul li h1 {
      font-size: 32px;
      color: #ff530d;
      text-align: center;
    }
    .panel-footer ul li h3 {
      font-size: 14px;
      text-align: center;
    }

<div class="panel-footer">
  <ul class="trip-stats-list">
    <li>
      <h1>422</h1>
      <h3>photos</h3>
    </li>
    <li>
      <h1>14</h1>
      <h3>places</h3>
    </li>
  </ul>
</div>

And here's what I want:

Answer 1

Finally, I had to lose the ul formation to gain the responsiveness I needed.

Here's the final code, (which along with bootstrap's grid classes) gets the visual that was required here.

.col-xs-6 {
  width: 50%;
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
  float: left;
}

h1 {
  font-size: 26px;
  font-weight: bold;
  margin: 5px;
  font-family: "Verdana";
}
h3 {
  text-transform: uppercase;
  font-size: 16px;
  font-weight: bold;
  font-family: "Arial";
  margin-top: 5px;
  margin-bot: 10px;
}
.panel-footer {
  text-align: center;
}
.panel-footer h1 {
  font-size: 32px;
  color: #ff530d;
}
.panel-footer h3 {
  font-size: 14px;
}

.col-xs-6 {
  border-left: 1px solid black;
}

.col-xs-6:first-child {
  border: 0px;
}

<div class="panel-footer">
  <div class="row">
    <div class="col-xs-6">
      <h1>422</h1>
      <h3>photos</h3>
    </div>
    <div class="col-xs-6">
      <h1>14</h1>
      <h3>places</h3>
    </div>
  </div>
</div>

Sorry for turning down some really good answers, but the specs I had was strict. Thank you all for your time!