diff --git a/src/views/orderlist/OrderListDemo.vue b/src/views/orderlist/OrderListDemo.vue
index 3ef5a78b8..cf46197db 100755
--- a/src/views/orderlist/OrderListDemo.vue
+++ b/src/views/orderlist/OrderListDemo.vue
@@ -15,7 +15,10 @@
                 <template #item="slotProps">
                     <div class="p-caritem">
                         <img :src="'demo/images/car/' + slotProps.item.brand + '.png'">
-                        <div>{{slotProps.item.brand}} - {{slotProps.item.year}} - {{slotProps.item.color}}</div>
+                        <div>
+                            <span class="p-caritem-vin">{{slotProps.item.vin}}</span>
+                            <span>{{slotProps.item.year}} - {{slotProps.item.color}}</span>
+                        </div>
                     </div>
                 </template>
             </OrderList>
@@ -49,23 +52,24 @@ export default {
 
 <style lang="scss" scoped>
 .p-caritem {
-    &:after {
-        content: "";
-        display: table;
-        clear: both;
+    display: flex;
+    align-items: center;
+
+    div {
+        display: flex;
+        flex-direction: column;
+    }
+
+    .p-caritem-vin {
+        font-weight: 600;
+        display: block;
+        margin-bottom: .25em;
     }
 
     img {
-        display:inline-block;
-        margin:2px 0 2px 2px;
         width: 48px;
         height: 48px;
-    }
-
-    div {
-        font-size:14px;
-        float:right;
-        margin: 16px 6px 0 0;
+        margin-right: .5em;
     }
 }
 </style>
\ No newline at end of file
diff --git a/src/views/orderlist/OrderListDoc.vue b/src/views/orderlist/OrderListDoc.vue
index b9503e2d8..d2f87cc35 100755
--- a/src/views/orderlist/OrderListDoc.vue
+++ b/src/views/orderlist/OrderListDoc.vue
@@ -21,7 +21,10 @@ import OrderList from 'primevue/orderlist';
     &lt;template #item="slotProps"&gt;
         &lt;div class="p-caritem"&gt;
             &lt;img :src="'demo/images/car/' + slotProps.item.brand + '.png'"&gt;
-            &lt;div&gt;&#123;&#123;slotProps.item.brand&#125;&#125; - &#123;&#123;slotProps.item.year&#125;&#125; - &#123;&#123;slotProps.item.color&#125;&#125;&lt;/div&gt;
+            &lt;div&gt;
+                &lt;span class="p-caritem-vin"&gt;{{slotProps.item.vin}}&lt;/span&gt;
+                &lt;span&gt;{{slotProps.item.year}} - {{slotProps.item.color}}&lt;/span&gt;
+            &lt;/div&gt;
         &lt;/div&gt;
     &lt;/template&gt;
 &lt;/OrderList&gt;
@@ -44,7 +47,10 @@ import OrderList from 'primevue/orderlist';
     &lt;template #item="slotProps"&gt;
         &lt;div class="p-caritem"&gt;
             &lt;img :src="'demo/images/car/' + slotProps.item.brand + '.png'"&gt;
-            &lt;div&gt;&#123;&#123;slotProps.item.brand&#125;&#125; - &#123;&#123;slotProps.item.year&#125;&#125; - &#123;&#123;slotProps.item.color&#125;&#125;&lt;/div&gt;
+            &lt;div&gt;
+                &lt;span class="p-caritem-vin"&gt;{{slotProps.item.vin}}&lt;/span&gt;
+                &lt;span&gt;{{slotProps.item.year}} - {{slotProps.item.color}}&lt;/span&gt;
+            &lt;/div&gt;
         &lt;/div&gt;
     &lt;/template&gt;
 &lt;/OrderList&gt;
@@ -171,7 +177,10 @@ import OrderList from 'primevue/orderlist';
     &lt;template #item="slotProps"&gt;
         &lt;div class="p-caritem"&gt;
             &lt;img :src="'demo/images/car/' + slotProps.item.brand + '.png'"&gt;
-            &lt;div&gt;&#123;&#123;slotProps.item.brand&#125; - &#123;&#123;slotProps.item.year&#125;&#125; - &#123;&#123;slotProps.item.color&#125;&#125;&lt;/div&gt;
+            &lt;div&gt;
+                &lt;span class="p-caritem-vin"&gt;{{slotProps.item.vin}}&lt;/span&gt;
+                &lt;span&gt;{{slotProps.item.year}} - {{slotProps.item.color}}&lt;/span&gt;
+            &lt;/div&gt;
         &lt;/div&gt;
     &lt;/template&gt;
 &lt;/OrderList&gt;
@@ -199,23 +208,24 @@ export default {
 
 <CodeHighlight lang="css">
 .p-caritem {
-    &amp;:after {
-        content: "";
-        display: table;
-        clear: both;
+    display: flex;
+    align-items: center;
+
+    div {
+        display: flex;
+        flex-direction: column;
+    }
+
+    .p-caritem-vin {
+        font-weight: 600;
+        display: block;
+        margin-bottom: .25em;
     }
 
     img {
-        display:inline-block;
-        margin:2px 0 2px 2px;
         width: 48px;
         height: 48px;
-    }
-
-    div {
-        font-size:14px;
-        float:right;
-        margin: 16px 6px 0 0;
+        margin-right: .5em;
     }
 }
 </CodeHighlight>
diff --git a/src/views/picklist/PickListDemo.vue b/src/views/picklist/PickListDemo.vue
index d1e31955c..9d5f62c89 100755
--- a/src/views/picklist/PickListDemo.vue
+++ b/src/views/picklist/PickListDemo.vue
@@ -18,7 +18,10 @@
                 <template #item="slotProps">
                     <div class="p-caritem">
                         <img :src="'demo/images/car/' + slotProps.item.brand + '.png'">
-                        <div>{{slotProps.item.brand}} - {{slotProps.item.year}} - {{slotProps.item.color}}</div>
+                        <div>
+                            <span class="p-caritem-vin">{{slotProps.item.vin}}</span>
+                            <span>{{slotProps.item.year}} - {{slotProps.item.color}}</span>
+                        </div>
                     </div>
                 </template>
             </PickList>
@@ -52,23 +55,24 @@ export default {
 
 <style lang="scss" scoped>
 .p-caritem {
-    &:after {
-        content: "";
-        display: table;
-        clear: both;
+    display: flex;
+    align-items: center;
+
+    div {
+        display: flex;
+        flex-direction: column;
+    }
+
+    .p-caritem-vin {
+        font-weight: 600;
+        display: block;
+        margin-bottom: .25em;
     }
 
     img {
-        display:inline-block;
-        margin:2px 0 2px 2px;
         width: 48px;
         height: 48px;
-    }
-
-    div {
-        font-size:14px;
-        float:right;
-        margin: 16px 6px 0 0;
+        margin-right: .5em;
     }
 }
 </style>
\ No newline at end of file
diff --git a/src/views/picklist/PickListDoc.vue b/src/views/picklist/PickListDoc.vue
index e308ceb0d..d6de3844a 100755
--- a/src/views/picklist/PickListDoc.vue
+++ b/src/views/picklist/PickListDoc.vue
@@ -16,7 +16,10 @@ import PickList from 'primevue/picklist';
     &lt;template #item="slotProps"&gt;
         &lt;div class="p-caritem"&gt;
             &lt;img :src="'demo/images/car/' + slotProps.item.brand + '.png'"&gt;
-            &lt;div&gt;&#123;&#123;slotProps.item.brand&#125;&#125; - &#123;&#123;slotProps.item.year&#125;&#125; - &#123;&#123;slotProps.item.color&#125;&#125;&lt;/div&gt;
+            &lt;div&gt;
+                &lt;span class="p-caritem-vin"&gt;{{slotProps.item.vin}}&lt;/span&gt;
+                &lt;span&gt;{{slotProps.item.year}} - {{slotProps.item.color}}&lt;/span&gt;
+            &lt;/div&gt;
         &lt;/div&gt;
     &lt;/template&gt;
 &lt;/PickList&gt;
@@ -37,7 +40,10 @@ import PickList from 'primevue/picklist';
     &lt;template #item="slotProps"&gt;
         &lt;div class="p-caritem"&gt;
             &lt;img :src="'demo/images/car/' + slotProps.item.brand + '.png'"&gt;
-            &lt;div&gt;&#123;&#123;slotProps.item.brand&#125;&#125; - &#123;&#123;slotProps.item.year&#125;&#125; - &#123;&#123;slotProps.item.color&#125;&#125;&lt;/div&gt;
+            &lt;div&gt;
+                &lt;span class="p-caritem-vin"&gt;{{slotProps.item.vin}}&lt;/span&gt;
+                &lt;span&gt;{{slotProps.item.year}} - {{slotProps.item.color}}&lt;/span&gt;
+            &lt;/div&gt;
         &lt;/div&gt;
     &lt;/template&gt;
 &lt;/PickList&gt;
@@ -55,7 +61,10 @@ import PickList from 'primevue/picklist';
     &lt;template #item="slotProps"&gt;
         &lt;div class="p-caritem"&gt;
             &lt;img :src="'demo/images/car/' + slotProps.item.brand + '.png'"&gt;
-            &lt;div&gt;&#123;&#123;slotProps.item.brand&#125;&#125; - &#123;&#123;slotProps.item.year&#125;&#125; - &#123;&#123;slotProps.item.color&#125;&#125;&lt;/div&gt;
+            &lt;div&gt;
+                &lt;span class="p-caritem-vin"&gt;{{slotProps.item.vin}}&lt;/span&gt;
+                &lt;span&gt;{{slotProps.item.year}} - {{slotProps.item.color}}&lt;/span&gt;
+            &lt;/div&gt;
         &lt;/div&gt;
     &lt;/template&gt;
 &lt;/PickList&gt;
@@ -230,7 +239,10 @@ import PickList from 'primevue/picklist';
     &lt;template #item="slotProps"&gt;
         &lt;div class="p-caritem"&gt;
             &lt;img :src="'demo/images/car/' + slotProps.item.brand + '.png'"&gt;
-            &lt;div&gt;&#123;&#123;slotProps.item.brand&#125;&#125; - &#123;&#123;slotProps.item.year&#125;&#125; - &#123;&#123;slotProps.item.color&#125;&#125;&lt;/div&gt;
+            &lt;div&gt;
+                &lt;span class="p-caritem-vin"&gt;{{slotProps.item.vin}}&lt;/span&gt;
+                &lt;span&gt;{{slotProps.item.year}} - {{slotProps.item.color}}&lt;/span&gt;
+            &lt;/div&gt;
         &lt;/div&gt;
     &lt;/template&gt;
 &lt;/PickList&gt;
@@ -258,23 +270,24 @@ export default {
 
 <CodeHighlight lang="css">
 .p-caritem {
-    &amp;:after {
-        content: "";
-        display: table;
-        clear: both;
+    display: flex;
+    align-items: center;
+
+    div {
+        display: flex;
+        flex-direction: column;
+    }
+
+    .p-caritem-vin {
+        font-weight: 600;
+        display: block;
+        margin-bottom: .25em;
     }
 
     img {
-        display:inline-block;
-        margin:2px 0 2px 2px;
         width: 48px;
         height: 48px;
-    }
-
-    div {
-        font-size:14px;
-        float:right;
-        margin: 16px 6px 0 0;
+        margin-right: .5em;
     }
 }
 </CodeHighlight>