Network { div { margin: .8rem border-bottom: 1px solid gainsboro } } NetworkConnection { padding-left: 6rem padding-bottom: .8rem position: relative display: flex flex-direction: row flex-wrap: wrap align-items: center section.avatar { position: absolute left: 0 top: 0 a img { height: 3rem width: 3rem } } section.time-ago { position: absolute left: 0 top: 3.5rem font-size: .8rem _textSubtle } section.name { flex-basis: 100% margin-right: 1rem } section.type { flex-basis: 100% font-size: .8rem _textSubtle } section.source { flex-basis: 100% label { margin-right: .5rem } } section.state { display: flex flex-direction: row align-items: center margin-right: 2rem label { margin-right: .5rem } i { width: 1rem height: 1rem border-radius: .5rem margin: 0 .2rem 0 .5rem background: #ccc -connecting, -disconnecting { background: #95cc95 } -connected { background: #06e206 } } } section.actions { button { padding: .2rem font-size: .7rem } } section.ping { flex-basis: 100% display: flex font-size: .8rem _textSubtle div.rtt { flex-basis: 8rem label { margin-right: .5rem } } div.skew { flex-basis: 8rem label { margin-right: .5rem } } } section.address{ flex-basis: 100% font-size: .8rem _textSubtle } }