From 7a340b5460bd2b4542a30227f0778a42df1e96f2 Mon Sep 17 00:00:00 2001
From: Pawan Kumar <6636360+jsartisan@users.noreply.github.com>
Date: Tue, 2 Jul 2024 10:06:29 +0000
Subject: [PATCH] feat(question): add #106 - Fix the vertical alignment
---
.../README.md | 1 +
.../info.yml | 11 +++
.../template.vanilla.md | 67 +++++++++++++++++++
3 files changed, 79 insertions(+)
create mode 100644 challenges/00106-easy-fix-the-vertical-alignment/README.md
create mode 100644 challenges/00106-easy-fix-the-vertical-alignment/info.yml
create mode 100644 challenges/00106-easy-fix-the-vertical-alignment/template.vanilla.md
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 00000000..01779941
--- /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 00000000..97ce9964
--- /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 00000000..e6ddce4d
--- /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": {}
+}
+```
+
+