<style>

 .list-chapter li div:last-of-type a {
        font-size: 0;
        position: relative
    }
    
    .list-chapter li div:last-of-type a:after {
        content: "\f019";
        font-family: FontAwesome;
        font-size: 15px
    }
    
    .list-chapter li div:last-of-type {
        width: 20%
    }
    
    .list-chapter li div:first-of-type {
        width: 80%
    }
    
  .select-chapter {
        max-width: 70% !important
    }
  .select-chapter {
        max-width: 100% !important
    }
  .select-chapter {
    padding: 5px;
    border: 1px solid #ddd;
    text-align: center;
    display: block;
    margin: 0 auto 20px;
    max-width: 40%
}
  .list-chapter {
    margin: 0;
    padding: 0;
    list-style: none
}

.list-chapter .list-head div {
    background: #303841;
    padding: 5px;
    color: #fff;
    text-align: center
}

.list-chapter .list-head div:last-of-type {
    border-left: 1px solid #4a5663
}

.list-chapter li div:first-of-type {
    border-left: 1px solid #ddd;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden
}

.list-chapter li div:last-of-type {
    text-align: center;
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd
}
</style>

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.