diff --git a/snippets/evenly-distributed-children.md b/snippets/evenly-distributed-children.md
new file mode 100644
index 000000000..35d9a1370
--- /dev/null
+++ b/snippets/evenly-distributed-children.md
@@ -0,0 +1,53 @@
+### Evenly distributed children
+
+Evenly distributes child elements within a parent element.
+
+#### HTML
+
+```html
+<div class="evenly-distributed-children">
+  <p>Item1</p>
+  <p>Item2</p>
+  <p>Item3</p>
+</div>
+```
+
+#### CSS
+
+```css
+.evenly-distributed-children {
+  display: flex;
+  justify-content: space-between;
+}
+```
+
+#### Demo
+
+<div class="snippet-demo">
+  <div class="snippet-demo__evenly-distributed-children">
+    <p>Item1</p>
+    <p>Item2</p>
+    <p>Item3</p>
+  </div>
+</div>
+
+<style>
+.snippet-demo__evenly-distributed-children {
+  display: flex;
+  width: 100%;  
+  justify-content: space-between;
+}
+</style>
+
+#### Explanation
+
+1. `display: flex` enables flexbox.
+2. `justify-content: space-between` evenly distributes child elements horizontally. The first item is positioned at the left edge, while the last item is positioned at the right edge.
+
+Alternatively, use `justify-content: space-around` to distribute the children with space around them, rather than between them.
+
+#### Browser support
+
+<span class="snippet__support-note">⚠️ Needs prefixes for full support.</span>
+
+* https://caniuse.com/#feat=flexbox
diff --git a/snippets/evenly-distributed-childs.md b/snippets/evenly-distributed-childs.md
deleted file mode 100644
index f2dbabdde..000000000
--- a/snippets/evenly-distributed-childs.md
+++ /dev/null
@@ -1,54 +0,0 @@
-### Evenly distributed childs
-
-Evenly distributed childs within the alignment container
-
-#### HTML
-
-```html
-<div class="evenly-distributed-childs">
-  <p class="child">Item1</p>
-  <p class="child">Item2</p>
-  <p class="child">Item3</p>
-</div>
-```
-
-#### CSS
-
-```css
-.evenly-distributed-childs {
-  display: flex;
-  width: 300px;
-  justify-content: space-between;
-}
-```
-
-#### Demo
-
-<div class="snippet-demo">
-  <div class="snippet-demo__evenly-distributed-childs">
-    <p class="snippet-demo__evenly-distributed-childs__child">Item1</p>
-    <p class="snippet-demo__evenly-distributed-childs__child">Item2</p>
-    <p class="snippet-demo__evenly-distributed-childs__child">Item3</p>
-  </div>
-</div>
-
-<style>
-.snippet-demo__evenly-distributed-childs {
-  display: flex;
-  width: 100%;  
-  justify-content: space-between;
-}
-</style>
-
-#### Explanation
-
-1. `display: flex` enables flexbox.
-2. `justify-content: space-between` evenly distributes childs in the line.
-
-First item will be on the start line, last item on the end line
-
-#### Browser support
-
-<span class="snippet__support-note">⚠️ Needs prefixes for full support.</span>
-
-* https://caniuse.com/#feat=flexbox