diff --git a/addons/website_event/views/event_event_add.xml b/addons/website_event/views/event_event_add.xml
index b11e2f56a86..3bfbf8f6630 100644
--- a/addons/website_event/views/event_event_add.xml
+++ b/addons/website_event/views/event_event_add.xml
@@ -12,10 +12,10 @@
                 <field name="name" placeholder="e.g. &quot;Conference for Architects&quot;" string="Event Name"/>
                 <field name="address_id" context="{'show_address': 1}" options='{"always_reload": True}'/>
                 <label for="date_begin" string="Start &#8594; End"/>
-                <div class="o_row w-100">
-                    <field name="date_begin" widget="daterange" nolabel="1" options="{'related_end_date': 'date_end'}"/>
+                <div class="d-flex flex-column flex-sm-row align-items-baseline w-100">
+                    <field name="date_begin" style="width: 17ch" widget="daterange" nolabel="1" options="{'related_end_date': 'date_end'}"/>
                     <i class="fa fa-long-arrow-right mx-2" aria-label="Arrow icon" title="Arrow"/>
-                    <field name="date_end" widget="daterange" nolabel="1" options="{'related_start_date': 'date_begin'}"/>
+                    <field name="date_end" style="width: 17ch" widget="daterange" nolabel="1" options="{'related_start_date': 'date_begin'}"/>
                 </div>
             </group>
         </form>