Align text in different containers (flexbox)-CodePudding

I have the following:

.container {
    display: flex;
    flex-direction: column;
}

header {
    display: flex;
    align-items: center;
    gap: 2em;
}

main {
    display: flex;
    gap: 2em;
}

<header>
                <h1 >Comments</h1>
                <p >
                    <em> A simple app that allows a user to input comments</em>
                </p>
            </header>
            <main>
                <!-- Use dashes in css classes -->
                <section >
                    <p>Add Your Comment:</p>
                    <input type="text" name="comment" id="comment" />
                    <button> </button>
                </section>
                <section >
                    <p>This is the first comment</p>
                    <p>Here's the second one</p>
                    <p>And this is one more</p>
                    <p>Here is another one</p>
                </section>
            </main>

I want the paragraph text in the header (.subtitle) to align with the paragraphs in the '.comments' section. How do I do that in flexbox?

CodePudding user response：

As both the <header> and <main> are having a flexbox, choose the first element in header and the first element in main and assign a flex of 20% to them. Don't forget to assign 100-20% to the second elements of main and header

.title, .comment-input {
  flex: 20%;
}

.subtitle, .comments {
  flex: 80%;
}

Here's the link to codepen

Tips: Try to avoid repetition of properties in CSS. I have modified the CSS code that avoids the repetition of assigning properties.

.container, header, main {
  display: flex;
}

.container {
  flex-direction: column;
}

header {
  align-items: center;
}

.title, .comment-input {
  flex: 20%;
}

.subtitle, .comments {
  flex: 80%;
}

CodePudding user response：

Simple way is just to add a padding on the paragraph or you can wrap your header in a div and give it a different gap. Like the samples below;

.container {
    display: flex;
    flex-direction: column;
}

.header {
    display: flex;
    align-items: center;
    gap: 5.5em;

}

main {
    display: flex;
    gap: 2em;
}

<header>
        <div >
                <h1 >Comments</h1>
                <p >
                    <em> A simple app that allows a user to input comments</em>
                </p>
          </div>
            </header>
            <main>
                <!-- Use dashes in css classes -->
                <section >
                    <p>Add Your Comment:</p>
                    <input type="text" name="comment" id="comment" />
                    <button> </button>
                </section>
                <section >
                    <p>This is the first comment</p>
                    <p>Here's the second one</p>
                    <p>And this is one more</p>
                    <p>Here is another one</p>
                </section>
            </main>

.container {
    display: flex;
    flex-direction: column;
}

header {
    display: flex;
    align-items: center;
    gap: 2em;
}

main {
    display: flex;
    gap: 2em;
}

.subtitle {padding-left: 53px;}

<header>
                <h1 >Comments</h1>
                <p >
                    <em> A simple app that allows a user to input comments</em>
                </p>
            </header>
            <main>
                <!-- Use dashes in css classes -->
                <section >
                    <p>Add Your Comment:</p>
                    <input type="text" name="comment" id="comment" />
                    <button> </button>
                </section>
                <section >
                    <p>This is the first comment</p>
                    <p>Here's the second one</p>
                    <p>And this is one more</p>
                    <p>Here is another one</p>
                </section>
            </main>