I have been attempting to adjust the paragraph with the errorDate class so that it displays as a block element directly beneath the input element similar to the image provided here. The section is currently set to appear as an inline-flex.
Below is the CSS code I modified, setting the display property to block for the errorDate class and inline-flex for the date class which is the parent 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>