Improving the sample to match the one from the Angular topic

Ivan Kitanov · Ivan Kitanov · commit d630c74a53e6 · 2024-07-19T12:17:17.000+03:00
diff --git a/samples/layouts/divider/middle/index.html b/samples/layouts/divider/middle/index.html
@@ -15,13 +15,20 @@
   <body>
     <div id="root">
       <div class="container sample center">
-        <p>Divider with middle inset</p>
-        <igc-divider class="withInset"
-          middle=true
-        ></igc-divider>
-        <p>And color property set</p>
-      </div> 
-    </div>
+        <div class="parent">
+          <div class="content">
+              <h4 class="mb">Both sides inset.</h4>
+              <igc-divider class="withInset" middle="true"></igc-divider>
+              <p class="mt">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad alias at consectetur dolor magnam maiores nihil quasi quod repudiandae similique. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, culpa delectus eius fuga ipsa iste laborum nemo, numquam omnis perferendis soluta sunt. Animi asperiores aspernatur assumenda doloribus eligendi.</p>
+          </div>
+          <div class="content">
+              <h4 class="mb">Left side only(default).</h4>
+              <igc-divider class="withInset"></igc-divider>
+              <p class="mt">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad alias at consectetur dolor magnam maiores nihil quasi quod repudiandae similique. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, culpa delectus eius fuga ipsa iste laborum nemo, numquam omnis perferendis soluta sunt. Animi asperiores aspernatur assumenda doloribus eligendi.</p>
+          </div>
+      </div>
+      </div>      
+  </div> 
     <!-- This script is needed only for parcel and it will be excluded for webpack -->
     <% if (false) { %><script src="src/index.ts"></script><% } %>
 
diff --git a/samples/layouts/divider/middle/src/DividerStyling.css b/samples/layouts/divider/middle/src/DividerStyling.css
@@ -1,4 +1,30 @@
+.parent{
+    display: flex;
+    justify-content: space-between;   
+}
+
+.content{
+    width: 45%;    
+    padding: 20px;
+}
+
 .withInset{
     --inset: 100px;
     --color:red;
-}
+}
+
+h4 {
+    margin-top: 0;
+}
+p {
+    margin-top: 0;
+}
+.mt {
+    margin-top: 16px;
+    margin-bottom: 0;
+}
+.mb {
+    margin-bottom: 16px;
+}
+
+
