diff --git a/challenges/00106-easy-fix-the-vertical-alignment/README.md b/challenges/00106-easy-fix-the-vertical-alignment/README.md
new file mode 100644
index 0000000..0177994
--- /dev/null
+++ b/challenges/00106-easy-fix-the-vertical-alignment/README.md
@@ -0,0 +1 @@
+We have a row layout where there can be inputs with label or without label. The requirement is the if there is a input with labe, then all the inputs without label should have margin top equal to the height of label + space between label and margin.
diff --git a/challenges/00106-easy-fix-the-vertical-alignment/info.yml b/challenges/00106-easy-fix-the-vertical-alignment/info.yml
new file mode 100644
index 0000000..97ce996
--- /dev/null
+++ b/challenges/00106-easy-fix-the-vertical-alignment/info.yml
@@ -0,0 +1,11 @@
+difficulty: easy
+title: Fix the vertical alignment
+type: question
+template: vanilla
+tags: css
+author:
+ github: jsartisan
+ name: Pawan Kumar
+ avatar_url: https://avatars.githubusercontent.com/u/6636360?v=4
+published_date: '2024-07-02'
+
diff --git a/challenges/00106-easy-fix-the-vertical-alignment/template.vanilla.md b/challenges/00106-easy-fix-the-vertical-alignment/template.vanilla.md
new file mode 100644
index 0000000..e6ddce4
--- /dev/null
+++ b/challenges/00106-easy-fix-the-vertical-alignment/template.vanilla.md
@@ -0,0 +1,67 @@
+```html index.html
+
+
+
+ Parcel Sandbox
+
+
+
+
+
+
+
+
+```
+
+```css styles.css
+body {
+ font-family: sans-serif;
+}
+
+h1 {
+ font-size: 1.5rem;
+}
+
+.row {
+ display: flex;
+ gap: 1rem;
+}
+
+.field {
+ display: flex;
+ flex-direction: column;
+ gap: 0.5rem;
+}
+
+.field label {
+ height: 1cap;
+ font-size: 14px;
+}
+
+```
+
+```js index.js
+import "./styles.css";
+```
+
+```json package.json
+{
+ "dependencies": {},
+ "main": "/index.js",
+ "devDependencies": {}
+}
+```
+
+