From 35f0c7ace7aa5bea22f9bd6180170f3b6c9f8945 Mon Sep 17 00:00:00 2001
From: cagataycivici <cagatay.civici@gmail.com>
Date: Mon, 28 Oct 2019 21:52:10 +0300
Subject: [PATCH] Use Flex

---
 src/views/dropdown/DropdownDemo.vue |  8 +++++---
 src/views/dropdown/DropdownDoc.vue  | 24 +++++++++++++-----------
 2 files changed, 18 insertions(+), 14 deletions(-)

diff --git a/src/views/dropdown/DropdownDemo.vue b/src/views/dropdown/DropdownDemo.vue
index deed2f468..74867f359 100644
--- a/src/views/dropdown/DropdownDemo.vue
+++ b/src/views/dropdown/DropdownDemo.vue
@@ -17,7 +17,7 @@
             <h3>Advanced with Templating, Filtering and Clear Icon</h3>
             <Dropdown v-model="selectedCar" :options="cars" optionLabel="brand" placeholder="Select a Car" :filter="true" :showClear="true">
                 <template #option="slotProps">
-                    <div class="p-clearfix p-dropdown-car-option">
+                    <div class="p-dropdown-car-option">
                         <img :alt="slotProps.option.brand" :src="'demo/images/car/' + slotProps.option.brand + '.png'" />
                         <span>{{slotProps.option.brand}}</span>
                     </div>
@@ -70,14 +70,16 @@ export default {
 }
 
 .p-dropdown-car-option {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
     img {
-        vertical-align: middle;
         margin-right: .5em;
         width: 24px;
     }
 
     span {
-        float: right;
         margin-top: .125em;
     }
 }
diff --git a/src/views/dropdown/DropdownDoc.vue b/src/views/dropdown/DropdownDoc.vue
index f5f44e7ed..8706d7d93 100644
--- a/src/views/dropdown/DropdownDoc.vue
+++ b/src/views/dropdown/DropdownDoc.vue
@@ -44,7 +44,7 @@ data() {
 <template v-pre>
 &lt;Dropdown v-model="selectedCar" :options="cars" optionLabel="brand" placeholder="Select a Car" :filter="true" :showClear="true"&gt;
 	&lt;template #option="slotProps"&gt;
-		&lt;div class="p-clearfix p-dropdown-car-option"&gt;
+		&lt;div class="p-dropdown-car-option"&gt;
 			&lt;img :alt="slotProps.option.brand" :src="'demo/images/car/' + slotProps.option.brand + '.png'" /&gt;
 			&lt;span&gt;{{slotProps.option.brand}}&lt;/span&gt;
 		&lt;/div&gt;
@@ -254,7 +254,7 @@ data() {
 &lt;h3&gt;Advanced with Templating, Filtering and Clear Icon&lt;/h3&gt;
 &lt;Dropdown v-model="selectedCar" :options="cars" optionLabel="brand" placeholder="Select a Car" :filter="true" :showClear="true"&gt;
     &lt;template #option="slotProps"&gt;
-        &lt;div class="p-clearfix p-dropdown-car-option"&gt;
+        &lt;div class="p-dropdown-car-option"&gt;
             &lt;img :alt="slotProps.option.brand" :src="'demo/images/car/' + slotProps.option.brand + '.png'" /&gt;
             &lt;span&gt;{{slotProps.option.brand}}&lt;/span&gt;
         &lt;/div&gt;
@@ -299,16 +299,18 @@ export default {
 }
 
 .p-dropdown-car-option {
-	img {
-		vertical-align: middle;
-		margin-right: .5em;
-		width: 24px;
-	}
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
 
-	span {
-		float: right;
-		margin-top: .125em;
-	}
+    img {
+        margin-right: .5em;
+        width: 24px;
+    }
+
+    span {
+        margin-top: .125em;
+    }
 }
 </CodeHighlight>
 			</TabPanel>