Search code examples
htmlcssuser-interfaceflexboxalignment

CSS give same width to vertically aligned elements not sharing common parent?

In the following figure, I'd like to make all the red boxes the width of the biggest red box, can I do it with this type of layout, or would I have to make two separate columns so that the red boxes could share a common parent? Or maybe use grid? enter image description here

Solution

  • It's not the right way to show it with paint and say I want it, as other friends say. Please share the codes you're trying next time.

    .container {
  width: 100%;
  max-width: 500px;
  margin:auto;
  padding: 20px;
  border: 3px solid black;
}

.text {
  border: 3px solid black;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
}

.text p {
  border: 3px solid red;
  flex-basis: 200px;
  text-align: center;
}
    <div class="container">
  <div class="text">
    <label>text1</label>
    <p>Lorem, ipsum dolor.</p>
  </div>
  <div class="text">
    <label>text2</label>
    <p>G</p>
  </div>
  <div class="text">
    <label>text3</label>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas, officia?</p>
  </div>
</div>