Benjamin Oats Benjamin Oats - 3 months ago 13
CSS Question

efficient and responsive way of text alignment bottom

I am trying to position"the answer is thee" text to the bottom of the page, It currently works.

The problem arises when i resize the screen the "big Text" and "answer Text" falls out of alignment as the "Big text" element is full height (depending on the text amount). I would like the "answer text" to not be set height but to be responsive height depending on the size of the content area "big text"

link to fiddel HERE

HTML

<head>
<link href="https://get.gridsetapp.com/35679/" rel="stylesheet" />
</head>

<li class="aside-open-close active">
<a class="aside-opener" href="#">Q1. Question here.</a>
<div class="slide">
<div class="columns">

<div class="d1-d3">
<p>one</p>
<p>two</p>
<p>three</p>
<p class="answer-box">three - The answer is three</p>
</div>

<div class="d4-d6 grey-border">
<p>big text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text
herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig
text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig
text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig
text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig
text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig
text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig
text herebig text herebig text herebig text herebig text here</p>
</div>

</div>
</div>
</li>


CSS

.aside-opener {
font-size: 16px !important;
font-weight: 600 !important;
}

.answer-box {
display: flex;
align-items: flex-end;
/* width: 100%; */
height: 290px;
}

.grey-border {
border: 1px solid rgba(68, 68, 68, .54);
margin-top: 15px;
}

.grey-border p {
padding: 0 10px 0 10px;
font-size: 16px;
font-weight: 600;
line-height: 19px;
}


The image bellow is correct, but its got a set height, i need the height to be responsive or 100%

enter image description here

Answer

You need nested flexbox columns.

Nested child 'sectionsinside yourlineeds to be a flex-container withflex-direction:column`.

The .columns section is just given display:flex (each child is flex:1) so that the children are queal height.

Once we have achieved that we can push the final paragraph (answer text) to the bottom of its column with margin-top:auto.

* {
  margin: 0;
  padding: 0;
}
li {
  display: flex;
  flex-direction: column;
}
.slide {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.columns {
  flex: 1;
  display: flex;
}
.d1-d3 {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.aside-opener {
  font-size: 16px !important;
  font-weight: 600 !important;
  background: lightgrey;
}
.answer-box {
  margin-top: auto;
  text-align: right;
}
.grey-border {
  border: 1px solid rgba(68, 68, 68, .54);
  flex: 1;
}
.grey-border p {
  padding: 0 10px 0 10px;
  font-size: 16px;
  font-weight: 600;
  line-height: 19px;
}
<ul>
  <li class="aside-open-close active">
    <a class="aside-opener" href="#">Q1. Question here.</a>
    <div class="slide">
      <div class="columns">

        <div class="d1-d3">
          <p>one</p>
          <p>two</p>
          <p>three</p>
          <p class="answer-box">three - The answer is three</p>
        </div>

        <div class="d4-d6 grey-border">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur labore qui tenetur officia, hic illum fugit deleniti</p>
        </div>

      </div>
    </div>
  </li>
</ul>

JSFiddle Demo

Comments