.itinerary-train { display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: repeat(auto-fit, auto); align-items: center; } .itinerary-train:not(:last-child) { grid-template-areas: "dep-time dep-station dep-platform" "train train train" "arr-time arrdep-station arr-platform" "dep2-time arrdep-station dep2-platform"; } .itinerary-train:last-child { grid-template-areas: "train train train" "arr-time arr-station arr-platform"; } .itinerary-train:only-child { grid-template-areas: "dep-time dep-station dep-platform" "train train train" "arr-time arr-station arr-platform"; } .itinerary-train .departure.time { grid-area: dep-time; } .itinerary-train .departure.platform { grid-area: dep-platform; } .itinerary-train .next-departure.time { grid-area: dep2-time; } .itinerary-train .next-departure.platform { grid-area: dep2-platform; } .itinerary-train .departure.station { grid-area: dep-station; } .itinerary-train .train { grid-area: train; } .itinerary-train .arrival.time { grid-area: arr-time; } .itinerary-train .arrival.platform { grid-area: arr-platform; } .itinerary-train:not(:last-child) .arrival.station { grid-area: arrdep-station; align-self: center; } .itinerary-train .arrival.station { grid-area: arr-station; } .itinerary-train .time { margin-left: 2px; margin-right: 2px; align-self: center; } .itinerary-train .platform { margin: 2px; padding: 2px; border: 1px solid black; border-radius: 4px; justify-self: end; min-width: 16px; text-align: center; } .itinerary-train .platform.changed { color: red; border-color: red; } .train .company { font-size: 0.8em; font-style: italic; } .walking { font-size: 0.95em; font-style: italic; } input#time { margin: 1px; } div.checkbox { display: flex; flex-direction: row; align-items: center; } div.checkbox p { flex: 1; } div.checkbox input { flex: 0; }