Vertical-align not working

HTML-CSS
1

So basically all I want to do is push my p up to the top of its container but I can’t figure it out, vertical-align has no effect.

html

  <div class="block">
    <div class="labels">
      <p id="how">How likely is that you would recommend freeCodeCamp to a friend?
    </div>
    <div class="input">
      <div class="radio">
        <input id="definitely" type="radio" name="recommend" value="definitely" checked="checked">
        <label for="definitely">Definitely</label>
      </div>
      <div class="radio">
        <input id="maybe" type="radio" name="recommend" value="maybe">
        <label for="maybe">Maybe</label>
      </div>
      <div class="radio">
        <input id="notSure" type="radio" name="recommend" value="notSure">
        <label for="notSure">Not Sure</label>
      </div>
    </div>

CSS

.block {
padding: 10px;
}

.labels {
display: inline-block;
width: 415px;
text-align: right;
}

.input {
display: inline-block;
padding-left: 10px;
}

#how {
vertical-align: text-top;
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.167 Safari/537.36.

Link to the challenge:
https://learn.freecodecamp.org/responsive-web-design/responsive-web-design-projects/build-a-survey-form

2

You have the right idea but are applying it to the wrong element.

Because the divs .labels and .input have been styled as input-block they will align to at the bottom by default (just like text). Put that style on .labels and those divs will align at the top, not the bottoms.

p also has some default bottom and top margin that will probably need to be removed as well.

If you are having trouble visualizing this put temporary background colors on those divs so you can see the size and alignment while you make changes.

3

Thank you alhazen1! Using temporary backgrounds has helped a lot!