使用 html/css/flexbox 样式错误消息

Question

I like would to implement error messages for the password field as the following below pic shows.

Could anyone please tell me what is the best/clean way to achieve the following view, with HTML/css and flexbox?

Answer 1

I know I should say 'show what you've tried' but I'm keen to see how other people would solve this.

The solution I've given below is über basic (it doesn't take care of long string values if they overflow; it could be better and update flex-direction to column for .row using a media query for small viewports).

Just as an aside, I'd highly recommend using the fxLayout library with Angular.

<div>
  <div class="row">
    <div class="cell">content 01</div>
    <div class="cell">content 02</div>
  </div>
  <div class="row">
    <div class="cell">content 03</div>
    <div class="cell">content 04</div>
  </div>
</div>
  

div.row {
  display: flex;
  flex-direction: row;
}

div.cell {
  display: flex;
  width: 50%;
}