I’m working on a Frequently Asked Questions section for a project I’m making up. I’m going to make a list of common questions a potential buyer may have. I want it so when the user clicks the +
button right after the question, a new paragraph opens up right below to answer the question. What I’m focused on now is trying to make it so all of the +
buttons are vertically aligned with each other. If you look how it is now, each +
is aligned in a different position depending on the length of the question. I’m using justify-content: space-between
to have a reasonable amount of distance between the question and the +
but it looks so tacky that the all the +
aren’t vertically aligned together.
section {
background-color: #fff;
height: 100vh;
height: fill-available;
min-height: -moz-available;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
overflow-x: hidden;
}
.faq {
display: flex;
flex-direction: column;
justify-content: center;
}
.container {
display: flex;
width: 60vw;
}
.left {
width: 100%;
}
.get-started {
font-family: "Poppins", sans-serif;
font-size: 28px;
}
.question {
display: flex;
justify-content: space-between;
}
<section class="faq">
<div class="container">
<div class="left">
<div class="get-started">
<p>Learn How To Get Started</p>
</div>
<div class="question">
<p>How do I create a website?</p>
<button>+</button>
<div>
<p></p>
</div>
</div>
<div class="question">
<p>Is this website right for me?</p>
<button>+</button>
<div>
<p></p>
</div>
</div>
<div class="question">
<p>How much will web storage cost me?</p>
<button>+</button>
<div>
<p></p>
</div>
</div>
</div>
</div>
</section>
2
Answers
If you want to use
justify-content: space-between;
to right align the button, you should only have 2 elements in the container, otherwise, there will be the same space between all elements of that container (in your example, after the button). In the snippet below, I created a div (.label) to wrap the question paragraph and the button, an then I used flexbox on it.JS Fiddle demo.
As for how it would be better handled, taking advantage of existing HTML elements and native functionality, I’d suggest the following (as already mentioned in the comments to the question):
JS Fiddle demo.
References:
::before
.::marker
.align-content
.background-color
.content
.display
.flex-direction
.flex-flow
.flex-grow
.flex-wrap
.gap
.justify-content
.line-height
.text-align
.<details>
.<summary>
.document.querySelectorAll()
.eventTarget.addEventListener()
.HTMLElement.hidden
.NodeList.forEach()
.