search

jsartisan / frontend-challenges

FrontendChallenges is a collection of frontend interview questions and answers. It is designed to help you prepare for frontend interviews. It's free and open source.
https://frontend-challenges.com
20 stars 3 forks source link

Fix the vertical alignment #106

Open jsartisan opened 3 days ago

jsartisan commented 3 days ago

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": {}
}
github-actions[bot] commented 3 days ago

107 - Pull Request updated.