diff --git a/core/modules/system/tests/modules/inline_form_element_test/inline_form_element_test.info.yml b/core/modules/system/tests/modules/inline_form_element_test/inline_form_element_test.info.yml
new file mode 100644
index 0000000000..91295132f2
--- /dev/null
+++ b/core/modules/system/tests/modules/inline_form_element_test/inline_form_element_test.info.yml
@@ -0,0 +1,5 @@
+name: 'Inline Form Element Test'
+type: module
+description: 'Test page for inline form element'
+package: Testing
+core_version_requirement: ^8 || ^9
diff --git a/core/modules/system/tests/modules/inline_form_element_test/inline_form_element_test.routing.yml b/core/modules/system/tests/modules/inline_form_element_test/inline_form_element_test.routing.yml
new file mode 100644
index 0000000000..9f588d2674
--- /dev/null
+++ b/core/modules/system/tests/modules/inline_form_element_test/inline_form_element_test.routing.yml
@@ -0,0 +1,7 @@
+inline_element.test:
+  path: '/inline-form-element-test'
+  defaults:
+    _form: '\Drupal\inline_form_element_test\Form\InlineElementForm'
+    _title: 'Inline Form Element Test'
+  requirements:
+    _permission: 'access content'
\ No newline at end of file
diff --git a/core/modules/system/tests/modules/inline_form_element_test/src/Form/InlineElementForm.php b/core/modules/system/tests/modules/inline_form_element_test/src/Form/InlineElementForm.php
new file mode 100644
index 0000000000..4825f8ffbf
--- /dev/null
+++ b/core/modules/system/tests/modules/inline_form_element_test/src/Form/InlineElementForm.php
@@ -0,0 +1,203 @@
+<?php
+
+namespace Drupal\inline_form_element_test\Form;
+
+use Drupal\Core\Datetime\DrupalDateTime;
+use Drupal\Core\Form\FormBase;
+use Drupal\Core\Form\FormStateInterface;
+
+/**
+ * Form for testing inline form elements.
+ */
+class InlineElementForm extends FormBase{
+
+  public function getFormId() {
+    return 'inline_form_elements';
+  }
+
+  public function buildForm(array $form, FormStateInterface $form_state) {
+
+    $form['item'] = [
+      '#type' => 'item',
+      '#title' => 'Each form item is wrapped with .container-inline',
+    ];
+    $form['a_textfield'] = [
+      '#type' => 'textfield',
+      '#title' => $this->t('A Textfield'),
+      '#size' => 60,
+      '#maxlength' => 128,
+      '#description' => 'I am a description. I am a description. I am a description. I am a description. I am a description. ',
+      '#prefix' => '<div class="container-inline">',
+      '#suffix' => '</div>',
+    ];
+
+    $form['some_checkboxes'] = [
+      '#type' => 'checkboxes',
+      '#options' => [
+        'one' => $this->t('Item One'),
+        'two' => $this->t('Item Two'),
+        'three' => $this->t('Item Three'),
+        'four' => $this->t('Item Four'),
+      ],
+      '#title' => $this->t('Some Checkboxes'),
+      '#description' => 'I am a description. I am a description. I am a description. I am a description. I am a description. ',
+      '#attributes' => [
+        'class' => ['container-inline'],
+      ],
+    ];
+    $form['some_radios'] = [
+      '#type' => 'radios',
+      '#title' => $this->t('Some Radios'),
+      '#options' => [
+        'one' => $this->t('Item One'),
+        'two' => $this->t('Item Two'),
+        'three' => $this->t('Item Three'),
+        'four' => $this->t('Item Four'),
+      ],
+      '#description' => 'I am a description. I am a description. I am a description. I am a description. I am a description.',
+      '#attributes' => [
+        'class' => ['container-inline'],
+      ],
+    ];
+
+    $form['a_textarea'] = [
+      '#type' => 'textarea',
+      '#title' => $this->t('A Textarea'),
+      '#description' => 'I am a description. I am a description. I am a description. I am a description. I am a description.',
+      '#prefix' => '<div class="container-inline">',
+      '#suffix' => '</div>',
+    ];
+
+    $form['a_select'] = [
+      '#type' => 'select',
+      '#title' => $this->t('A Select'),
+      '#options' => [
+        'one' => $this->t('Item One'),
+        'two' => $this->t('Item Two'),
+        'three' => $this->t('Item Three'),
+        'four' => $this->t('Item Four'),
+      ],
+      '#description' => 'I am a description. I am a description. I am a description. I am a description. I am a description.',
+      '#prefix' => '<div class="container-inline">',
+      '#suffix' => '</div>',
+    ];
+
+    $form['a_datetime'] = [
+      '#type' => 'datetime',
+      '#title' => $this->t('A Date Time'),
+      '#default_value' => new DrupalDateTime('2000-01-01 00:00:00'),
+      '#date_date_element' => 'date',
+      '#date_time_element' => 'time',
+      '#date_year_range' => '2010:+3',
+      '#date_timezone' => 'Asia/Kolkata',
+      '#prefix' => '<div class="container-inline">',
+      '#suffix' => '</div>',
+      '#description' => 'I am a description. I am a description. I am a description. I am a description. I am a description.',
+    ];
+
+    $form['uses-inline-wrapper'] = [
+      '#type' => 'container',
+      '#attributes' => [
+        'class' => ['form--inline-elements'],
+      ],
+    ];
+
+    $form['uses-inline-wrapper']['item'] = [
+      '#type' => 'item',
+      '#title' => 'Uses a wrapper class',
+    ];
+
+    $form['uses-inline-wrapper']['a_textfield'] = [
+      '#type' => 'textfield',
+      '#title' => $this->t('A Textfield'),
+      '#size' => 60,
+      '#maxlength' => 128,
+      '#description' => 'I am a description. I am a description. I am a description. I am a description. I am a description. ',
+    ];
+
+    $form['uses-inline-wrapper']['some_checkboxes'] = [
+      '#type' => 'checkboxes',
+      '#options' => [
+        'one' => $this->t('Item One'),
+        'two' => $this->t('Item Two'),
+        'three' => $this->t('Item Three'),
+        'four' => $this->t('Item Four'),
+      ],
+      '#title' => $this->t('Some Checkboxes'),
+      '#description' => 'I am a description. I am a description. I am a description. I am a description. I am a description. ',
+    ];
+    $form['uses-inline-wrapper']['some_radios'] = [
+      '#type' => 'radios',
+      '#title' => $this->t('Some Radios'),
+      '#options' => [
+        'one' => $this->t('Item One'),
+        'two' => $this->t('Item Two'),
+        'three' => $this->t('Item Three'),
+        'four' => $this->t('Item Four'),
+      ],
+      '#description' => 'I am a description. I am a description. I am a description. I am a description. I am a description.',
+    ];
+
+    $form['uses-inline-wrapper']['a_textarea'] = [
+      '#type' => 'textarea',
+      '#title' => $this->t('A Textarea'),
+      '#description' => 'I am a description. I am a description. I am a description. I am a description. I am a description.',
+    ];
+
+    $form['uses-inline-wrapper']['a_select'] = [
+      '#type' => 'select',
+      '#title' => $this->t('A Select'),
+      '#options' => [
+        'one' => $this->t('Item One'),
+        'two' => $this->t('Item Two'),
+        'three' => $this->t('Item Three'),
+        'four' => $this->t('Item Four'),
+      ],
+      '#description' => 'I am a description. I am a description. I am a description. I am a description. I am a description.',
+    ];
+
+    $form['uses-inline-wrapper']['a_datetime'] = [
+      '#type' => 'datetime',
+      '#title' => $this->t('A Date Time'),
+      '#default_value' => new DrupalDateTime('2000-01-01 00:00:00'),
+      '#date_date_element' => 'date',
+      '#date_time_element' => 'time',
+      '#date_year_range' => '2010:+3',
+      '#date_timezone' => 'Asia/Kolkata',
+      '#description' => 'I am a description. I am a description. I am a description. I am a description. I am a description.',
+    ];
+
+    $form['submit'] = [
+      '#type' => 'submit',
+      '#value' => $this->t('Submit to make errors appear'),
+      '#attributes' => [
+        'class' => ['button--small'],
+      ],
+    ];
+
+    return $form;
+  }
+
+  public function submitForm(array &$form, FormStateInterface $form_state) {
+    // Intentionally empty.
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  public function validateForm(array &$form, FormStateInterface $form_state) {
+    $element_names = [
+      'a_textfield',
+      'some_checkboxes',
+      'some_radios',
+      'a_textarea',
+      'a_select',
+      'a_datetime',
+    ];
+    foreach ($element_names as $name) {
+      $form_state->setErrorByName($name, $this->t("I am an error belonging to $name, so you know what I look like."));
+    }
+
+  }
+
+}
\ No newline at end of file
diff --git a/core/tests/Drupal/KernelTests/Core/Theme/ConfirmClassyCopiesTest.php b/core/tests/Drupal/KernelTests/Core/Theme/ConfirmClassyCopiesTest.php
index a6a0d2a96b..382588dd2b 100644
--- a/core/tests/Drupal/KernelTests/Core/Theme/ConfirmClassyCopiesTest.php
+++ b/core/tests/Drupal/KernelTests/Core/Theme/ConfirmClassyCopiesTest.php
@@ -260,14 +260,12 @@ public function providerTestClassyCopies() {
         'filenames' => [
           'css' => [
             'book-navigation.css',
-            'container-inline.css',
             'exposed-filters.css',
             'field.css',
             'file.css',
             'forum.css',
             'icons.css',
             'indented.css',
-            'inline-form.css',
             'item-list.css',
             'link.css',
             'links.css',
diff --git a/core/themes/claro/claro.info.yml b/core/themes/claro/claro.info.yml
index 99397ee0fc..54a4cfabd4 100644
--- a/core/themes/claro/claro.info.yml
+++ b/core/themes/claro/claro.info.yml
@@ -28,6 +28,7 @@ libraries-override:
       component:
         css/components/ajax-progress.module.css: css/components/ajax-progress.module.css
         css/components/autocomplete-loading.module.css: css/components/autocomplete-loading.module.css
+        css/components/container-inline.module.css: false
         css/components/system-status-counter.css: css/components/system-status-counter.css
         css/components/system-status-report-counters.css: css/components/system-status-report-counters.css
         css/components/system-status-report-general-info.css: css/components/system-status-report-general-info.css
diff --git a/core/themes/claro/claro.libraries.yml b/core/themes/claro/claro.libraries.yml
index d4fbca8419..6afdb8c082 100644
--- a/core/themes/claro/claro.libraries.yml
+++ b/core/themes/claro/claro.libraries.yml
@@ -6,11 +6,9 @@ global-styling:
       css/base/typography.css: {}
       css/base/print.css: {}
     component:
-      css/classy/components/container-inline.css: {}
       css/classy/components/exposed-filters.css: {}
       css/classy/components/field.css: {}
       css/classy/components/icons.css: {}
-      css/classy/components/inline-form.css: {}
       css/classy/components/item-list.css: {}
       css/classy/components/link.css: {}
       css/classy/components/links.css: {}
@@ -23,7 +21,6 @@ global-styling:
       css/components/action-link.css: {}
       css/components/content-header.css: {}
       css/components/container-inline.css: {}
-      css/components/container-inline.module.css: {}
       css/components/breadcrumb.css: {}
       css/components/button.css: {}
       css/components/details.css: {}
@@ -40,6 +37,7 @@ global-styling:
       css/components/form--select.css: {}
       css/components/help.css: {}
       css/components/image-preview.css: {}
+      css/components/inline-form.css: {}
       css/components/menus-and-lists.css: {}
       css/components/modules-page.css: {}
       css/components/node.css: {}
@@ -48,7 +46,6 @@ global-styling:
       css/components/skip-link.css: {}
       css/components/tables.css: {}
       css/components/table--file-multiple-widget.css: {}
-      css/components/search-admin-settings.css: {}
       css/components/tablesort-indicator.css: {}
       css/components/system-status-report-general-info.css: {}
       css/components/system-status-report.css: {}
diff --git a/core/themes/claro/css/classy/components/container-inline.css b/core/themes/claro/css/classy/components/container-inline.css
deleted file mode 100644
index 64b78f683b..0000000000
--- a/core/themes/claro/css/classy/components/container-inline.css
+++ /dev/null
@@ -1,22 +0,0 @@
-/**
- * @file
- * Inline items.
- */
-
-.container-inline label:after,
-.container-inline .label:after {
-  content: ":";
-}
-.form-type-radios .container-inline label:after,
-.form-type-checkboxes .container-inline label:after {
-  content: "";
-}
-.form-type-radios .container-inline .form-type-radio,
-.form-type-checkboxes .container-inline .form-type-checkbox {
-  margin: 0 1em;
-}
-.container-inline .form-actions,
-.container-inline.form-actions {
-  margin-top: 0;
-  margin-bottom: 0;
-}
diff --git a/core/themes/claro/css/classy/components/inline-form.css b/core/themes/claro/css/classy/components/inline-form.css
deleted file mode 100644
index b5201a78c9..0000000000
--- a/core/themes/claro/css/classy/components/inline-form.css
+++ /dev/null
@@ -1,33 +0,0 @@
-/**
- * @file
- * Visual styles for inline forms.
- */
-
-.form--inline .form-item {
-  float: left; /* LTR */
-  margin-right: 0.5em; /* LTR */
-}
-[dir="rtl"] .form--inline .form-item {
-  float: right;
-  margin-right: 0;
-  margin-left: 0.5em;
-}
-/* This is required to win over specificity of [dir="rtl"] .form--inline .form-item */
-[dir="rtl"] .views-filterable-options-controls .form-item {
-  margin-right: 2%;
-}
-.form--inline .form-item-separator {
-  margin-top: 2.3em;
-  margin-right: 1em; /* LTR */
-  margin-left: 0.5em; /* LTR */
-}
-[dir="rtl"] .form--inline .form-item-separator {
-  margin-right: 0.5em;
-  margin-left: 1em;
-}
-.form--inline .form-actions {
-  clear: left; /* LTR */
-}
-[dir="rtl"] .form--inline .form-actions {
-  clear: right;
-}
diff --git a/core/themes/claro/css/components/container-inline.css b/core/themes/claro/css/components/container-inline.css
index d44b07e17a..8e56862dce 100644
--- a/core/themes/claro/css/components/container-inline.css
+++ b/core/themes/claro/css/components/container-inline.css
@@ -10,15 +10,305 @@
  * Inline items.
  */
 
-.container-inline .form-radios label:after {
-  content: "";
+:root {
+  /*
+   * Color Palette.
+   */
+  /* Secondary. */
+  /* Variations. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 10% darker than base. */ /* 20% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */
+  /*
+   * Base.
+   */
+  /*
+   * Typography.
+   */ /* 1rem = 16px if font root is 100% ands browser defaults are used. */ /* ~32px */ /* ~29px */ /* ~26px */ /* ~23px */ /* ~20px */ /* 18px */ /* ~14px */ /* ~13px */ /* ~11px */
+  /**
+   * Spaces.
+   */ /* 3 * 16px = 48px */ /* 1.5 * 16px = 24px */ /* 1 * 16px = 16px */ /* 0.75 * 16px = 12px */ /* 0.5 * 16px = 8px */
+  /*
+   * Common.
+   */
+  /*
+   * Inputs.
+   */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
+  /*
+   * Details.
+   */
+  /**
+   * Buttons.
+   */
+  /**
+   * jQuery.UI dropdown.
+   */ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
+  /**
+   * jQuery.UI dialog.
+   */
+  /**
+   * Progress bar.
+   */
+  /**
+   * Tabledrag icon size.
+   */ /* 17px */
+  /**
+   * Ajax progress.
+   */
+  /**
+   * Breadcrumb.
+   */
 }
 
-.container-inline .form-radios .form-type-radio {
-  margin-right: 1em;
+.container-inline div,
+.container-inline label {
+  display: inline-block;
 }
 
-[dir="rtl"] .container-inline .form-radios .form-type-radio {
+/* Details contents always need to be rendered as block. */
+
+.container-inline .details-wrapper {
+  display: block;
+}
+
+/**
+ * Textarea and datetime items need to be flex in order to properly position
+ * labels.
+ */
+
+.container-inline .form-type--textarea,
+.container-inline .form-datetime-wrapper,
+.form--inline-elements .form-item {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.container-inline .form-item:not(:last-child) {
+  margin-right: 1rem; /* LTR */
+}
+
+[dir="rtl"] .container-inline .form-item:not(:last-child) {
+  margin-right: 0; /* LTR */
+  margin-left: 1rem;
+}
+
+.form-items-inline {
+  display: flex;
+  flex-wrap: wrap;
+  margin-top: -0.125em; /* 2px */
+  margin-bottom: -0.125em;
+}
+
+.form-items-inline > .form-item {
+  display: inline-block;
+  margin-top: 0.125em;
+  margin-right: 1rem; /* LTR */
+  margin-bottom: 0.125em;
+}
+
+[dir="rtl"] .form-items-inline > .form-item {
   margin-right: 0;
-  margin-left: 1em;
+  margin-left: 1rem;
+}
+
+/* Vertically center labels. */
+
+.container-inline .form-item__label,
+.form--inline-elements .form-item__label {
+  display: inline-flex;
+  align-items: center;
+}
+
+/* Textarea labels are top aligned. */
+
+.container-inline .form-type--textarea .form-item__label,
+.form--inline-elements .form-type--textarea .form-item__label {
+  align-items: flex-start;
+}
+
+.container-inline .form-item__label,
+.container-inline .fieldset__legend,
+.container-inline .form-textarea-wrapper,
+.form--inline-elements .form-item__label,
+.form--inline-elements.fieldset__legend,
+.form--inline-elements .form-textarea-wrapper,
+.search-block-form > .container-inline > h2 {
+  margin-right: 1rem; /* LTR */
+  white-space: nowrap;
+}
+
+[dir="rtl"] .container-inline .form-item__label,
+[dir="rtl"] .container-inline .fieldset__legend,
+[dir="rtl"] .container-inline .form-textarea-wrapper,
+[dir="rtl"] .form--inline-elements .form-item__label,
+[dir="rtl"] .form--inline-elements .fieldset__legend,
+[dir="rtl"] .form--inline-elements .form-textarea-wrapper,
+[dir="rtl"] .search-block-form > .container-inline > h2 {
+  margin-right: 0;
+  margin-left: 1rem;
+}
+
+.container-inline .fieldset__description,
+.container-inline .form-item__description,
+.container-inline .form-item__error-message,
+.container-inline .fieldset__error-message {
+  display: block;
+}
+
+.form--inline-elements .fieldset__description,
+.form--inline-elements .form-item__description,
+.form--inline-elements .form-item__error-message,
+.form--inline-elements .fieldset__error-message,
+.container-inline .form-type--textarea .fieldset__description,
+.container-inline .form-type--textarea .form-item__description,
+.container-inline .form-type--textarea .form-item__error-message,
+.container-inline .form-type--textarea .fieldset__error-message,
+.container-inline .form-datetime-wrapper .fieldset__description,
+.container-inline .form-datetime-wrapper .form-item__description,
+.container-inline .form-datetime-wrapper .form-item__error-message,
+.container-inline .form-datetime-wrapper .fieldset__error-message {
+  width: 100%;
+  margin-right: 0;
+  margin-left: 0;
+}
+
+.container-inline .form-actions .button,
+.container-inline .form-actions,
+.container-inline.form-actions {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.container-inline .claro-details__wrapper.claro-details__wrapper > * {
+  margin-right: 1rem; /* LTR */
+}
+
+[dir="rtl"] .container-inline .claro-details__wrapper.claro-details__wrapper > * {
+  margin-right: 0;
+  margin-left: 1rem;
+}
+
+.container-inline .claro-details__wrapper .button {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+/* Align checkbox and radio inputs with their label */
+
+.form--inline-elements .form-item__label.option {
+  margin-top: 0;
+}
+
+.container-inline .form-type--checkbox .form-item__label {
+  position: relative;
+  bottom: 1px;
+}
+
+.container-inline .form-type--radio .form-item__label {
+  position: relative;
+  bottom: 2px;
+}
+
+.container-inline .form-boolean-group,
+.form--inline-elements .form-boolean-group {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.container-inline .form-type--boolean,
+.form--inline-elements .form-type--boolean {
+  margin-left: 0;
+  white-space: nowrap;
+}
+
+[dir="rtl"] .container-inline .form-type--boolean,
+[dir="rtl"] .form--inline-elements .form-type--boolean {
+  margin-right: 0;
+}
+
+.container-inline .form-type--boolean .form-boolean,
+.form--inline-elements .form-type--boolean .form-boolean {
+  position: static;
+  float: none; /* LTR */
+  margin-right: 0.5rem; /* LTR */
+  margin-left: 0; /* LTR */
+  transform: none;
+}
+
+[dir="rtl"] .container-inline .form-type--boolean .form-boolean,
+[dir="rtl"] .form--inline-elements .form-type--boolean .form-boolean {
+  float: none; /* Same as LTR, but needs to be here for specificity. */
+  margin-right: 0;
+  margin-left: 0.5rem;
+}
+
+.container-inline .form-type--boolean .form-boolean {
+  margin-right: calc(0.5rem - 2px);
+}
+
+[dir="rtl"] .container-inline .form-type--boolean .form-boolean {
+  margin-right: 0;
+  margin-left: calc(0.5rem - 2px);
+}
+
+.ui-dialog .container-inline .form-type--checkbox:not(:last-child),
+.ui-dialog .container-inline .form-type--radio:not(:last-child) {
+  margin-right: 1rem; /* LTR */
+}
+
+[dir="rtl"] .ui-dialog .container-inline .form-type--checkbox:not(:last-child),
+[dir="rtl"] .ui-dialog .container-inline .form-type--radio:not(:last-child) {
+  margin-right: 0;
+  margin-left: 1rem;
+}
+
+@media screen and (min-width: 601px) {
+  .container-inline .form-type--boolean:not(:last-child),
+  .form--inline-elements .form-type--boolean:not(:last-child) {
+    margin-right: 2rem; /* LTR */
+  }
+  [dir="rtl"] .container-inline .form-type--boolean:not(:last-child),
+  [dir="rtl"] .form--inline-elements .form-type--boolean:not(:last-child) {
+    margin-right: 0;
+    margin-left: 2rem;
+  }
+}
+
+/**
+ * IE11 flex-wrap will not work in several scenarios such as when it is nested
+ * in another flexbox with flex-wrap enabled. To get around this, IE11 instead
+ * uses the classic float and clearfix approach.
+ */
+
+@media all and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+  .container-inline .form-boolean-group,
+  .form--inline-elements .form-boolean-group {
+    display: block;
+  }
+  .container-inline .form-boolean-group::after {
+    display: table;
+    clear: both;
+    content: "";
+  }
+
+  .container-inline .form-boolean-group .form-type--boolean,
+  .form--inline-elements .form-boolean-group .form-type--boolean {
+    float: left; /* LTR */
+  }
+  [dir="rtl"] .container-inline .form-boolean-group .form-type--boolean,
+  [dir="rtl"] .form--inline-elements .form-boolean-group .form-type--boolean {
+    float: right;
+  }
+
+  .container-inline .form-boolean-group .form-type--boolean {
+    display: inline;
+  }
+
+  .container-inline .fieldset__legend--composite,
+  .form--inline-elements .fieldset__legend--composite {
+    display: block;
+    width: 100%;
+  }
+
+  .fieldset__description,
+  .fieldset__error-message {
+    clear: both;
+  }
 }
diff --git a/core/themes/claro/css/components/container-inline.module.pcss.css b/core/themes/claro/css/components/container-inline.module.pcss.css
deleted file mode 100644
index 1de39bb552..0000000000
--- a/core/themes/claro/css/components/container-inline.module.pcss.css
+++ /dev/null
@@ -1,20 +0,0 @@
-/**
- * @file
- * Inline items.
- */
-
-.container-inline div,
-.container-inline label {
-  display: inline-block;
-}
-
-.form-items-inline {
-  margin-top: -0.125em; /* 2px */
-  margin-bottom: -0.125em;
-}
-
-.form-items-inline > .form-item {
-  display: inline-block;
-  margin-top: 0.125em;
-  margin-bottom: 0.125em;
-}
diff --git a/core/themes/claro/css/components/container-inline.pcss.css b/core/themes/claro/css/components/container-inline.pcss.css
index 3a4570046f..fb59c1a190 100644
--- a/core/themes/claro/css/components/container-inline.pcss.css
+++ b/core/themes/claro/css/components/container-inline.pcss.css
@@ -3,13 +3,244 @@
  * Inline items.
  */
 
-.container-inline .form-radios label:after {
-  content: "";
+@import "../base/variables.pcss.css";
+
+.container-inline div,
+.container-inline label {
+  display: inline-block;
+}
+
+/* Details contents always need to be rendered as block. */
+.container-inline .details-wrapper {
+  display: block;
+}
+
+/**
+ * Textarea and datetime items need to be flex in order to properly position
+ * labels.
+ */
+.container-inline .form-type--textarea,
+.container-inline .form-datetime-wrapper,
+.form--inline-elements .form-item {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.container-inline .form-item:not(:last-child) {
+  margin-right: var(--space-m); /* LTR */
+}
+[dir="rtl"] .container-inline .form-item:not(:last-child) {
+  margin-right: 0; /* LTR */
+  margin-left: var(--space-m);
+}
+
+.form-items-inline {
+  display: flex;
+  flex-wrap: wrap;
+  margin-top: -0.125em; /* 2px */
+  margin-bottom: -0.125em;
+}
+
+.form-items-inline > .form-item {
+  display: inline-block;
+  margin-top: 0.125em;
+  margin-right: var(--space-m); /* LTR */
+  margin-bottom: 0.125em;
+}
+[dir="rtl"] .form-items-inline > .form-item {
+  margin-right: 0;
+  margin-left: var(--space-m);
+}
+
+/* Vertically center labels. */
+.container-inline .form-item__label,
+.form--inline-elements .form-item__label {
+  display: inline-flex;
+  align-items: center;
+}
+
+/* Textarea labels are top aligned. */
+.container-inline .form-type--textarea .form-item__label,
+.form--inline-elements .form-type--textarea .form-item__label {
+  align-items: flex-start;
+}
+
+.container-inline .form-item__label,
+.container-inline .fieldset__legend,
+.container-inline .form-textarea-wrapper,
+.form--inline-elements .form-item__label,
+.form--inline-elements.fieldset__legend,
+.form--inline-elements .form-textarea-wrapper,
+.search-block-form > .container-inline > h2 {
+  margin-right: var(--space-m); /* LTR */
+  white-space: nowrap;
+}
+
+[dir="rtl"] .container-inline .form-item__label,
+[dir="rtl"] .container-inline .fieldset__legend,
+[dir="rtl"] .container-inline .form-textarea-wrapper,
+[dir="rtl"] .form--inline-elements .form-item__label,
+[dir="rtl"] .form--inline-elements .fieldset__legend,
+[dir="rtl"] .form--inline-elements .form-textarea-wrapper,
+[dir="rtl"] .search-block-form > .container-inline > h2 {
+  margin-right: 0;
+  margin-left: var(--space-m);
+}
+
+.container-inline .fieldset__description,
+.container-inline .form-item__description,
+.container-inline .form-item__error-message,
+.container-inline .fieldset__error-message {
+  display: block;
+}
+
+.form--inline-elements .fieldset__description,
+.form--inline-elements .form-item__description,
+.form--inline-elements .form-item__error-message,
+.form--inline-elements .fieldset__error-message,
+.container-inline .form-type--textarea .fieldset__description,
+.container-inline .form-type--textarea .form-item__description,
+.container-inline .form-type--textarea .form-item__error-message,
+.container-inline .form-type--textarea .fieldset__error-message,
+.container-inline .form-datetime-wrapper .fieldset__description,
+.container-inline .form-datetime-wrapper .form-item__description,
+.container-inline .form-datetime-wrapper .form-item__error-message,
+.container-inline .form-datetime-wrapper .fieldset__error-message {
+  width: 100%;
+  margin-right: 0;
+  margin-left: 0;
+}
+
+.container-inline .form-actions .button,
+.container-inline .form-actions,
+.container-inline.form-actions {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.container-inline .claro-details__wrapper.claro-details__wrapper > * {
+  margin-right: var(--space-m); /* LTR */
 }
-.container-inline .form-radios .form-type-radio {
-  margin-right: 1em;
+[dir="rtl"] .container-inline .claro-details__wrapper.claro-details__wrapper > * {
+  margin-right: 0;
+  margin-left: var(--space-m);
 }
-[dir="rtl"] .container-inline .form-radios .form-type-radio {
+
+.container-inline .claro-details__wrapper .button {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+/* Align checkbox and radio inputs with their label */
+.form--inline-elements .form-item__label.option {
+  margin-top: 0;
+}
+.container-inline .form-type--checkbox .form-item__label {
+  position: relative;
+  bottom: 1px;
+}
+.container-inline .form-type--radio .form-item__label {
+  position: relative;
+  bottom: 2px;
+}
+
+.container-inline .form-boolean-group,
+.form--inline-elements .form-boolean-group {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.container-inline .form-type--boolean,
+.form--inline-elements .form-type--boolean {
+  margin-left: 0;
+  white-space: nowrap;
+}
+[dir="rtl"] .container-inline .form-type--boolean,
+[dir="rtl"] .form--inline-elements .form-type--boolean {
+  margin-right: 0;
+}
+
+.container-inline .form-type--boolean .form-boolean,
+.form--inline-elements .form-type--boolean .form-boolean {
+  position: static;
+  float: none; /* LTR */
+  margin-right: var(--space-xs); /* LTR */
+  margin-left: 0; /* LTR */
+  transform: none;
+}
+[dir="rtl"] .container-inline .form-type--boolean .form-boolean,
+[dir="rtl"] .form--inline-elements .form-type--boolean .form-boolean {
+  float: none; /* Same as LTR, but needs to be here for specificity. */
   margin-right: 0;
-  margin-left: 1em;
+  margin-left: var(--space-xs);
+}
+.container-inline .form-type--boolean .form-boolean {
+  margin-right: calc(var(--space-xs) - 2px);
+}
+[dir="rtl"] .container-inline .form-type--boolean .form-boolean {
+  margin-right: 0;
+  margin-left: calc(var(--space-xs) - 2px);
+}
+
+.ui-dialog .container-inline .form-type--checkbox:not(:last-child),
+.ui-dialog .container-inline .form-type--radio:not(:last-child) {
+  margin-right: var(--space-m); /* LTR */
+}
+[dir="rtl"] .ui-dialog .container-inline .form-type--checkbox:not(:last-child),
+[dir="rtl"] .ui-dialog .container-inline .form-type--radio:not(:last-child) {
+  margin-right: 0;
+  margin-left: var(--space-m);
+}
+
+@media screen and (min-width: 601px) {
+  .container-inline .form-type--boolean:not(:last-child),
+  .form--inline-elements .form-type--boolean:not(:last-child) {
+    margin-right: 2rem; /* LTR */
+  }
+  [dir="rtl"] .container-inline .form-type--boolean:not(:last-child),
+  [dir="rtl"] .form--inline-elements .form-type--boolean:not(:last-child) {
+    margin-right: 0;
+    margin-left: 2rem;
+  }
+}
+
+/**
+ * IE11 flex-wrap will not work in several scenarios such as when it is nested
+ * in another flexbox with flex-wrap enabled. To get around this, IE11 instead
+ * uses the classic float and clearfix approach.
+ */
+@media all and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+  .container-inline .form-boolean-group,
+  .form--inline-elements .form-boolean-group {
+    display: block;
+  }
+  .container-inline .form-boolean-group::after {
+    display: table;
+    clear: both;
+    content: "";
+  }
+
+  .container-inline .form-boolean-group .form-type--boolean,
+  .form--inline-elements .form-boolean-group .form-type--boolean {
+    float: left; /* LTR */
+  }
+  [dir="rtl"] .container-inline .form-boolean-group .form-type--boolean,
+  [dir="rtl"] .form--inline-elements .form-boolean-group .form-type--boolean {
+    float: right;
+  }
+
+  .container-inline .form-boolean-group .form-type--boolean {
+    display: inline;
+  }
+
+  .container-inline .fieldset__legend--composite,
+  .form--inline-elements .fieldset__legend--composite {
+    display: block;
+    width: 100%;
+  }
+
+  .fieldset__description,
+  .fieldset__error-message {
+    clear: both;
+  }
 }
diff --git a/core/themes/claro/css/components/page-title.css b/core/themes/claro/css/components/inline-form.css
similarity index 73%
copy from core/themes/claro/css/components/page-title.css
copy to core/themes/claro/css/components/inline-form.css
index 31699cc219..d12731443e 100644
--- a/core/themes/claro/css/components/page-title.css
+++ b/core/themes/claro/css/components/inline-form.css
@@ -7,7 +7,7 @@
 
 /**
  * @file
- * Page title.
+ * Visual styles for inline forms.
  */
 
 :root {
@@ -57,28 +57,31 @@
    */
 }
 
-.block-page-title-block {
-  margin-bottom: 0.75rem;
+.form--inline .form-item {
+  float: left; /* LTR */
+  margin: 0 0.75rem 0 0; /* LTR */
 }
 
-.block-page-title-block:last-child {
-  margin-bottom: 1.5rem;
+[dir="rtl"] .form--inline .form-item {
+  float: right;
+  margin-right: 0;
+  margin-left: 0.75rem;
 }
 
-/**
- * There are use cases where page title is not rendered as a block ¯\_(ツ)_/¯.
- *
- * @see Drupal\system\Controller\BatchController::batchPage()
- */
+.form--inline .form-item--separator {
+  display: flex;
+  align-items: center;
+  /* Top margin is the label line-height + label top and bottom margins */
+  margin-top: 1.625rem;
+  margin-right: 0.75rem; /* LTR */
+  white-space: nowrap;
+}
 
-.region-header > .page-title {
-  margin-top: 1.25rem;
-  margin-bottom: 1.5rem;
+[dir="rtl"] .form--inline .form-item--separator {
+  margin-right: 0;
+  margin-left: 0.75rem;
 }
 
-.page-title {
-  display: inline-block;
-  margin: 0;
-  font-size: 2.027rem;
-  -webkit-font-smoothing: antialiased;
+.form--inline .form-actions {
+  width: 100%;
 }
diff --git a/core/themes/claro/css/components/inline-form.pcss.css b/core/themes/claro/css/components/inline-form.pcss.css
new file mode 100644
index 0000000000..e653f12f86
--- /dev/null
+++ b/core/themes/claro/css/components/inline-form.pcss.css
@@ -0,0 +1,33 @@
+/**
+ * @file
+ * Visual styles for inline forms.
+ */
+
+@import "../base/variables.pcss.css";
+
+.form--inline .form-item {
+  float: left; /* LTR */
+  margin: 0 var(--space-s) 0 0; /* LTR */
+}
+[dir="rtl"] .form--inline .form-item {
+  float: right;
+  margin-right: 0;
+  margin-left: var(--space-s);
+}
+
+.form--inline .form-item--separator {
+  display: flex;
+  align-items: center;
+  /* Top margin is the label line-height + label top and bottom margins */
+  margin-top: calc(1.125rem + var(--space-xs));
+  margin-right: var(--space-s); /* LTR */
+  white-space: nowrap;
+}
+[dir="rtl"] .form--inline .form-item--separator {
+  margin-right: 0;
+  margin-left: var(--space-s);
+}
+
+.form--inline .form-actions {
+  width: 100%;
+}
diff --git a/core/themes/claro/css/components/search-admin-settings.pcss.css b/core/themes/claro/css/components/search-admin-settings.pcss.css
deleted file mode 100644
index cc117e38f4..0000000000
--- a/core/themes/claro/css/components/search-admin-settings.pcss.css
+++ /dev/null
@@ -1,14 +0,0 @@
-/**
- * @file
- * Styles for administration pages.
- */
-
-/**
- * Add search page select/submit.
- */
-.search-admin-settings .container-inline {
-  margin-bottom: 1em;
-}
-.search-admin-settings label[for="edit-search-type"] {
-  display: block;
-}