diff --git a/core/modules/config_translation/css/config_translation.admin.css b/core/modules/config_translation/css/config_translation.admin.css
index e6e90c34597..8e862fb8813 100644
--- a/core/modules/config_translation/css/config_translation.admin.css
+++ b/core/modules/config_translation/css/config_translation.admin.css
@@ -7,38 +7,18 @@
  * Hide the label, in an accessible way, for responsive screens which show the
  * form in one column.
  */
-.config-translation-form .translation-element-wrapper .translation label {
-  position: absolute !important;
+.translation-set__translated label {
   clip: rect(1px, 1px, 1px, 1px);
-  overflow: hidden;
   height: 1px;
+  overflow: hidden;
+  position: absolute;
   width: 1px;
 }
 
-/**
- * For wider screens, show the label and display source and translation side by
- * side.
- */
-@media all and (min-width: 851px) {
-  .config-translation-form .translation-element-wrapper .source {
-    width: 48%;
-    float: left; /* LTR */
-  }
-  [dir="rtl"] .config-translation-form .translation-element-wrapper .source {
-    float: right;
-  }
-  .config-translation-form .translation-element-wrapper .translation {
-    width: 48%;
-    float: right; /* LTR */
-  }
-  [dir="rtl"] .config-translation-form .translation-element-wrapper .translation {
-    float: left;
-  }
-  .config-translation-form .translation-element-wrapper .translation label {
-    position: static !important;
-    clip: auto;
-    overflow: visible;
+@media screen and (min-width: 38em) {
+  .translation-set__translated label {
     height: auto;
+    position: inherit;
     width: auto;
   }
 }
diff --git a/core/modules/config_translation/templates/config_translation_manage_form_element.html.twig b/core/modules/config_translation/templates/config_translation_manage_form_element.html.twig
index d20d19cbb7f..672f5677f60 100644
--- a/core/modules/config_translation/templates/config_translation_manage_form_element.html.twig
+++ b/core/modules/config_translation/templates/config_translation_manage_form_element.html.twig
@@ -14,11 +14,11 @@
  * @ingroup themeable
  */
 #}
-<div class="clearfix translation-element-wrapper">
-  <div class="source">
+<div class="translation-set clearfix">
+  <div class="layout-column half translation-set__source">
     {{ element.source }}
   </div>
-  <div class="translation">
+  <div class="layout-column half translation-set__translated">
     {{ element.translation }}
   </div>
 </div>