dl dt otherlinks

dl dt otherlinks

by pj_js15

HTML

<div class="item-row">
  <div>
    <input type="checkbox" />
    <span>The Trustee for Retirement Wrap</span>
  </div>
  <dl class="other-info">
    <dl>
      <dt>Estimated balance</dt>
      <dd>$50,123.00</dd>
    </dl>
    <dl>
      <dt>Account Number</dt>
      <dd>366624000012316</dd>
    </dl>
    <dl>
      <dt>Insurance</dt>
      <dd>Yes</dd>
    </dl>
  </dl>
</div>

CSS

*{
  font-family: Arial;
}
.item-row{
  background-color: #F8F9FC;
}
.item-row div{
  width: 40%;
  display: inline-block;
}
.item-row div > span{
  font-size: 18px;
  font-weight: bold;
}
.item-row > dl.other-info{
  display: inline-block;
  padding: 10px 0 10px 38px;
  width: 55%;
}
dd, dl, dt {
  margin: 0;
  padding: 0;
}
.other-info dl {
  width: 32%;
  display: inline-block;
}
.other-info dl dt {
  font-size: 11px;
}
.other-info dl dd {
  font-size: 13px;
  font-weight: bold;
  line-height: 2;
}

@media only screen and (max-width: 480px) {
  .item-row div{
    width: 100%;
    display: block;
  }
  .item-row div > span{
    font-size: smaller;
  }
  dl.other-info{
    padding: 10px 0 10px 26px;
  }
  .other-info dl {
    display: block;
    width: 100%;
    margin-bottom: 10px;
  }
  .other-info dl dt{
    width: 45%;
    display: inline-block;
  }
  .other-info dl dd{
    width: 45%;
    display: inline-block;
  }
}