Make booking form look nicer

Author: fboeller

projects/train-platform/src/booking/booking/booking.component.css

@@ -0,0 +1,18 @@
+.booking-options {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  margin: 0.5rem;
+}
+
+.booking-options label {
+  display: inline-block;
+  width: 360px;
+  margin-right: 1rem;
+}
+
+.booking-actions {
+  display: flex;
+  flex-direction: row-reverse;
+  gap: 1rem;
+}

projects/train-platform/src/booking/booking/booking.component.html

@@ -1,4 +1,4 @@
-<div>
+<div class="booking-options">
   <div>
     <label>{{ "booking.reserveSeatQuestion" | translate }}</label>
     <input type="checkbox" [(ngModel)]="reserveSeat" />
@@ -9,6 +9,6 @@
   </div>
 </div>
 
-<div>
+<div class="booking-actions">
   <button (click)="book()">{{ "booking.bookAction" | translate }}</button>
 </div>