Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix the vertical alignment #106

Open
jsartisan opened this issue Jul 2, 2024 · 1 comment · May be fixed by #107
Open

Fix the vertical alignment #106

jsartisan opened this issue Jul 2, 2024 · 1 comment · May be fixed by #107
Labels
new-challenge question Further information is requested vanilla

Comments

@jsartisan
Copy link
Owner

Info

difficulty: easy
title: Fix the vertical alignment
type: question
template: vanilla
tags: css

Question

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.

Template

index.html

<!doctype html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div class="row">
      <div class="field">
        <label class="label">Name</label>
        <div class="control">
          <input class="input" type="text" placeholder="Text input" />
        </div>
      </div>
      <div class="field">
        <div class="control">
          <input class="input" type="text" placeholder="Text input" />
        </div>
      </div>
    </div>
  </body>
</html>

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;
}

index.js

import "./styles.css";

package.json

{
  "dependencies": {},
  "main": "/index.js",
  "devDependencies": {}
}
@jsartisan jsartisan added question Further information is requested vanilla new-challenge labels Jul 2, 2024
github-actions bot pushed a commit that referenced this issue Jul 2, 2024
@jsartisan
feat(question): add #106 - Fix the vertical alignment
7a340b5
@github-actions github-actions bot linked a pull request Jul 2, 2024 that will close this issue
Open
@github-actions GitHub Actions
Copy link
Contributor

github-actions bot commented Jul 2, 2024

#107 - Pull Request updated.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
new-challenge question Further information is requested vanilla
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

#106 - Fix the vertical alignment jsartisan/frontend-challenges
1 participant
@jsartisan