.container
  .card.p-8.bg-white.w-full.max-w-xl.my-10.mx-auto
    h1.text-center.mb-8.font-bold.py-3.text-2xl
      | MENU
    dl.menu-list
      .menu-list-item
        dt Chef Salad
        dd
          i.fas.fa-dollar-sign
          | 5.74
      .menu-list-item
        dt Italian Pasta Salad
        dd
          i.fas.fa-dollar-sign
          | 5.74
      .menu-list-item
        dt Garden Salad
        dd
          i.fas.fa-dollar-sign
          | 5.74
      .menu-list-item
        dt Caesar Salad
        dd
          i.fas.fa-dollar-sign
          | 6.00
      .menu-list-item
        dt
          | Greek Salad
        dd
          i.fas.fa-dollar-sign
          | 6.00

body{
  background-color: #EEE;
}

.card{
  background-color: #fff;
  box-shadow: 1.5rem 1.5rem 0 #87b153;
}

h1{
  font-family: 'pt-sans-narrow', sans-serif;
  border-top: 2px solid #000;
  border-bottom: 2px solid #000;
}

.menu-list {
  font-family: monospace;
  font-size: 20px;
}
dl.menu-list .menu-list-item {
  display: flex;
  margin: 5px 0px 5px 0px;
}
dl.menu-list dt {
  flex: 0 1 auto;
  margin: 0px 0px 0px 0px;
  order: 1;
}
dl.menu-list .menu-list-item:after {
  // dotted line
  background-image:  radial-gradient(circle, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 24%, rgba(255,255,255,0) 25%, rgba(255,255,255,0) 100%);
  background-size: .5em .5rem;
  background-repeat: repeat-x;
  background-position: left bottom;
  content: "";
  display: block;
  flex: 1 1 auto;
  margin: 0px 12px 5px 12px;
  order: 2;
}
dl.menu-list dd {
  flex: 0 1 auto;
  margin: 0px 0px 0px 0px;
  order: 3;
}