Improve countdown display

data/ui/countdown-label.ui

@@ -6,14 +6,51 @@
 -->
 <interface>
   <requires lib="gtk+" version="3.22"/>
-  <template class="CountdownLabel" parent="GtkLabel">
+  <template class="CountdownLabel" parent="GtkBox">
     <property name="visible">True</property>
     <property name="can_focus">False</property>
-    <attributes>
-      <attribute name="font-features" value="tnum=1"/>
-    </attributes>
-    <style>
-      <class name="countdown-label"/>
-    </style>
+    <property name="spacing">6</property>
+    <property name="halign">center</property>
+    <child>
+      <object class="GtkLabel" id="_time_label">
+        <property name="visible">True</property>
+        <property name="can_focus">False</property>
+        <property name="label" translatable="yes">0
+0
+0
+0</property>
+        <property name="justify">right</property>
+        <property name="width_chars">3</property>
+        <attributes>
+          <attribute name="font-features" value="tnum"/>
+        </attributes>
+        <style>
+          <class name="countdown-label"/>
+        </style>
+      </object>
+      <packing>
+        <property name="expand">False</property>
+        <property name="fill">True</property>
+        <property name="position">0</property>
+      </packing>
+    </child>
+    <child>
+      <object class="GtkLabel">
+        <property name="visible">True</property>
+        <property name="can_focus">False</property>
+        <property name="label" translatable="yes">Days
+Hours
+Minutes
+Seconds</property>
+        <style>
+          <class name="countdown-label"/>
+        </style>
+      </object>
+      <packing>
+        <property name="expand">False</property>
+        <property name="fill">True</property>
+        <property name="position">1</property>
+      </packing>
+    </child>
   </template>
 </interface>

src/countdownlabel.py

@@ -5,11 +5,13 @@ from gi.repository import GLib, GObject, Gtk
 
 
 @Gtk.Template(resource_path='/uk/me/bcowan/countdown/ui/countdown-label.ui')
-class CountdownLabel(Gtk.Label):
+class CountdownLabel(Gtk.Box):
     """A label that displays a countdown to a specific time"""
 
     __gtype_name__ = 'CountdownLabel'
 
+    _time_label = Gtk.Template.Child()
+
     def __init__(self):
         super().__init__()
 
@@ -23,7 +25,7 @@ class CountdownLabel(Gtk.Label):
         now = GLib.DateTime.new_now_local()
         diff = self._target.difference(now)
 
-        self.props.label = self._format_difference(diff)
+        self._time_label.props.label = self._format_difference(diff)
         return True
 
     @staticmethod
@@ -37,9 +39,7 @@ class CountdownLabel(Gtk.Label):
         diff /= 24
         days = int(diff)
 
-        return "{:3d} days\n{:3d} hours\n{:3d} minutes\n{:3d} seconds".format(
-            days, hours, minutes, seconds
-        )
+        return f"{days}\n{hours}\n{minutes}\n{seconds}"
 
     @GObject.Property(type=GLib.DateTime)
     def target(self) -> GLib.DateTime: