I've been trying to change my paragraph to block which is contained in a section that has elements displaying in inline-flex

Question

I have been trying to change the paragraph with class errorDate to display as a block element immediately below the input element just as the image here. The section is set to display as an inline-flex.

In the following css code i added display block in class errorDate and display inline-flex in date class which is the section element

.date {
  display: inline-flex;
  flex-direction: row;
}

.errorDate {
  display: block;
}

<section class="date">
  <input type="datetime" class="mmname" id="mm" placeholder="MM" pattern="[01-31]{2}" required>

  <input type="datetime" class="yyname" id="yy" placeholder="YY" pattern="[00-99]{2}" required>
  <p class="errorDate"> Can't be blank </p>
  <!--CVC-->
  <div class="cVc">
    <label for="cvc" class="cvc">CVC</label>
    <input type="text" class="cvcname " id="cvcname" placeholder="eg. 123" pattern="[000-999]{3}" required>
    <p class="errorCvc">Can't be blank</p>

  </div>
</section>

score 0 · Answer 1 · answered Aug 18 '22 at 04:58

This link, What's the difference between display:inline-flex and display:flex? may be worth reading.

In your case, move the <p class="errorDate">The date can't be blank</p> outside the <section>. It works nicely now.

.date {
  display: inline-flex;
  flex-direction: row;
}

.errorDate {
  display: block;
}

<section class="date">
  <input type="datetime" class="mmname" id="mm" placeholder="MM" pattern="[01-31]{2}" required>
  <input type="datetime" class="yyname" id="yy" placeholder="YY" pattern="[00-99]{2}" required>
  <div class="cVc">
    <input type="text" class="cvcname " id="cvcname" placeholder="eg. 123" pattern="[000-999]{3}" required>
    <p class="errorCvc">The CVC can't be blank</p>
  </div>
</section>
<p class="errorDate">The date can't be blank</p>

I've been trying to change my paragraph to block which is contained in a section that has elements displaying in inline-flex

1 Answers1