diff --git a/doc/dropdown/FloatLabelDoc.vue b/doc/dropdown/FloatLabelDoc.vue
index acdc07c08..0f96551d6 100644
--- a/doc/dropdown/FloatLabelDoc.vue
+++ b/doc/dropdown/FloatLabelDoc.vue
@@ -3,8 +3,8 @@
         <p>A floating label appears on top of the input field when focused.</p>
     </DocSectionText>
     <div class="card flex justify-content-center">
-        <div class="p-float-label">
-            <Dropdown v-model="selectedCity" inputId="dd-city" :options="cities" optionLabel="name" class="w-full md:w-14rem" />
+        <div class="p-float-label w-full md:w-14rem">
+            <Dropdown v-model="selectedCity" inputId="dd-city" :options="cities" optionLabel="name" class="w-full" />
             <label for="dd-city">Select a City</label>
         </div>
     </div>
@@ -25,16 +25,16 @@ export default {
             ],
             code: {
                 basic: `
-<div class="p-float-label">
-    <Dropdown v-model="selectedCity" inputId="dd-city" :options="cities" optionLabel="name" class="w-full md:w-14rem" />
+<div class="p-float-label w-full md:w-14rem">
+    <Dropdown v-model="selectedCity" inputId="dd-city" :options="cities" optionLabel="name" class="w-full" />
     <label for="dd-city">Select a City</label>
 </div>
 `,
                 options: `
 <template>
     <div class="card flex justify-content-center">
-        <div class="p-float-label">
-            <Dropdown v-model="selectedCity" inputId="dd-city" :options="cities" optionLabel="name" class="w-full md:w-14rem" />
+        <div class="p-float-label w-full md:w-14rem">
+            <Dropdown v-model="selectedCity" inputId="dd-city" :options="cities" optionLabel="name" class="w-full" />
             <label for="dd-city">Select a City</label>
         </div>
     </div>
@@ -60,8 +60,8 @@ export default {
                 composition: `
 <template>
     <div class="card flex justify-content-center">
-        <div class="p-float-label">
-            <Dropdown v-model="selectedCity" inputId="dd-city" :options="cities" optionLabel="name" class="w-full md:w-14rem" />
+        <div class="p-float-label w-full md:w-14rem">
+            <Dropdown v-model="selectedCity" inputId="dd-city" :options="cities" optionLabel="name" class="w-full" />
             <label for="dd-city">Select a City</label>
         </div>
     </div>
diff --git a/doc/multiselect/FloatLabelDoc.vue b/doc/multiselect/FloatLabelDoc.vue
index 7b52c6b58..4a181ce18 100644
--- a/doc/multiselect/FloatLabelDoc.vue
+++ b/doc/multiselect/FloatLabelDoc.vue
@@ -3,8 +3,8 @@
         <p>A floating label appears on top of the input field when focused.</p>
     </DocSectionText>
     <div class="card flex justify-content-center">
-        <span class="p-float-label">
-            <MultiSelect id="ms-cities" v-model="selectedCities" :options="cities" optionLabel="name" :maxSelectedLabels="3" class="w-full md:w-20rem" />
+        <span class="p-float-label w-full md:w-20rem">
+            <MultiSelect id="ms-cities" v-model="selectedCities" :options="cities" optionLabel="name" :maxSelectedLabels="3" class="w-full" />
             <label for="ms-cities">MultiSelect</label>
         </span>
     </div>
@@ -25,16 +25,16 @@ export default {
             ],
             code: {
                 basic: `
-<span class="p-float-label">
-    <MultiSelect id="ms-cities" v-model="selectedCities" :options="cities" optionLabel="name" :maxSelectedLabels="3" class="w-full md:w-20rem" />
+<span class="p-float-label w-full md:w-20rem">
+    <MultiSelect id="ms-cities" v-model="selectedCities" :options="cities" optionLabel="name" :maxSelectedLabels="3" class="w-full" />
     <label for="ms-cities">MultiSelect</label>
 </span>
 `,
                 options: `
 <template>
     <div class="card flex justify-content-center">
-        <span class="p-float-label">
-            <MultiSelect id="ms-cities" v-model="selectedCities" :options="cities" optionLabel="name" :maxSelectedLabels="3" class="w-full md:w-20rem" />
+        <span class="p-float-label w-full md:w-20rem">
+            <MultiSelect id="ms-cities" v-model="selectedCities" :options="cities" optionLabel="name" :maxSelectedLabels="3" class="w-full" />
             <label for="ms-cities">MultiSelect</label>
         </span>
     </div>
@@ -60,8 +60,8 @@ export default {
                 composition: `
 <template>
     <div class="card flex justify-content-center">
-        <span class="p-float-label">
-            <MultiSelect id="ms-cities" v-model="selectedCities" :options="cities" optionLabel="name" :maxSelectedLabels="3" class="w-full md:w-20rem" />
+        <span class="p-float-label w-full md:w-20rem">
+            <MultiSelect id="ms-cities" v-model="selectedCities" :options="cities" optionLabel="name" :maxSelectedLabels="3" class="w-full" />
             <label for="ms-cities">MultiSelect</label>
         </span>
     </div>
diff --git a/doc/treeselect/FloatLabelDoc.vue b/doc/treeselect/FloatLabelDoc.vue
index 5b96eecb2..dbd1c72fa 100644
--- a/doc/treeselect/FloatLabelDoc.vue
+++ b/doc/treeselect/FloatLabelDoc.vue
@@ -3,8 +3,8 @@
         <p>A floating label appears on top of the input field when focused.</p>
     </DocSectionText>
     <div class="card flex justify-content-center">
-        <span class="p-float-label">
-            <TreeSelect v-model="selectedValue" :options="nodes" class="md:w-20rem w-full" />
+        <span class="p-float-label w-full md:w-20rem">
+            <TreeSelect v-model="selectedValue" :options="nodes" class="w-full" />
             <label>Tree Select</label>
         </span>
     </div>
@@ -21,16 +21,16 @@ export default {
             selectedValue: null,
             code: {
                 basic: `
-<span class="p-float-label">
-    <TreeSelect v-model="selectedValue" :options="nodes" class="md:w-20rem w-full" />
+<span class="p-float-label w-full md:w-20rem">
+    <TreeSelect v-model="selectedValue" :options="nodes" class="w-full" />
     <label>Tree Select</label>
 </span>
 `,
                 options: `
 <template>
     <div class="card flex justify-content-center">
-        <span class="p-float-label">
-            <TreeSelect v-model="selectedValue" :options="nodes" class="md:w-20rem w-full" />
+        <span class="p-float-label w-full md:w-20rem">
+            <TreeSelect v-model="selectedValue" :options="nodes" class="w-full" />
             <label>Tree Select</label>
         </span>
     </div>
@@ -55,8 +55,8 @@ export default {
                 composition: `
 <template>
     <div class="card flex justify-content-center">
-        <span class="p-float-label">
-            <TreeSelect v-model="selectedValue" :options="nodes" class="md:w-20rem w-full" />
+        <span class="p-float-label w-full md:w-20rem">
+            <TreeSelect v-model="selectedValue" :options="nodes" class="w-full" />
             <label>Tree Select</label>
         </span>
     </div>