[AFP-47 Shaphen Pangburn]: Reformate product details' sku and brand placement

ecom-web/src/components/product-market/product-details.jsx

@@ -13,8 +13,11 @@ export default class ProductDetails extends Component {
                     <div id="prod-details-container">
                         <img alt="" src={ this.props.product.productImageUrl } id="prod-details-img" />
                         <div id="prod-details-box">
+                            <div id="details-brand-and-sku-box">
+                                <p id="details-brand">{ this.props.product.brand }</p>
+                                <p id="details-sku">sku: { this.props.product.sku }</p>
+                            </div>
                             <p id="details-title">{ this.props.product.productName }</p>
-                            <p id="details-sku"><span>sku:</span> { this.props.product.sku }</p>
                             <p id="details-description">{ this.props.product.productDescription }</p>
                         </div>
                     </div>

ecom-web/src/resources/stylesheets/product-market.css

@@ -202,10 +202,21 @@
     margin-top: 10px;
 }
 
+#details-brand-and-sku-box {
+    display: flex;
+    justify-content: space-between;
+}
+
+#details-brand {
+    font-size: 15px;
+    opacity: 0.5;
+    margin-left: 5px;
+}
+
 #details-sku {
     font-size: 15px;
-    margin: 5px 0px 10px;
     opacity: 0.5;
+    margin-right: 5px;
 }
 
 #details-description {