Align Error Message Under Input - HTML/CSS

Question

I have the following images that represent each case for user input-validation.

No Error:

Input Error:

I would like to maintain the alignment of the upper image while moving the error message underneath the input field (keep Label on left and Input on right, place error message underneath and aligned with input).

.group {
  display: flex;
  flex-wrap: nowrap;
  margin-top: 4px;
}

.group label {
  display: flex;
  width: 15%;
  line-height: 30px;
  justify-content: center;
  align-items: center;
}

.group input[type="text"] {
  width: 85%;
  border: 1px solid rgb(116, 115, 115);
  padding-left: 3px;
}

.group textarea:focus,
input:focus {
  outline: none;
}

.group .errorMsg {
  color: #cc0033;
  display: inline-block;
  font-size: 12px;
  line-height: 15px;
  margin: 5px 0 0;
  width: 100%;
}

.group .errorMsg {
  display: none;
}


/* Error Styling */

.err label {
  color: #cc0033;
}

.err input[type=text] {
  background-color: #fce4e4;
  border: 1px solid #cc0033;
  outline: none;
}

.err .errorMsg {
  display: inline-block;
}

<div class="group err">
  <label for="time">Time</label>
  <input type="text" name="time" id="time" />
  <div class="errorMsg">Invalid Time Format</div>
</div>
<div class="group">
  <label for="time2">Time2</label>
  <input type="text" name="time2" id="time2" />
  <div class="errorMsg">Invalid Time Format</div>
</div>

Any recommendations to fix the poor alignment?

Answer 1

You can align them like this. I have added comments to the right of the changes.

.group {
  display: flex;
  flex-wrap: wrap; /* Wrap the elements */
  margin-top: 4px;
}

.group label {
  display: flex;
  width: 15%;
  line-height: 30px;
  justify-content: center;
  align-items: center;
}

.group input[type="text"] {
  width: 85%;
  border: 1px solid rgb(116, 115, 115);
  padding-left: 3px;
  flex: 1; /* Take the remaining width */
}

.group textarea:focus,
input:focus {
  outline: none;
}

.group .errorMsg {
  color: #cc0033;
  display: inline-block;
  font-size: 12px;
  line-height: 15px;
  margin: 5px 0 0;
  width: 100%;
}

.group .errorMsg {
  display: none;
}


/* Error Styling */

.err label {
  color: #cc0033;
}

.err input[type=text] {
  background-color: #fce4e4;
  border: 1px solid #cc0033;
  outline: none;
}

.err .errorMsg {
  display: flex; /* Instead of inline-block */
  width: 85%; /* Same as input width */
  left: 15%; /* Rest of the width */
  position: relative; /* Relative to parent */
  
}

<div class="group err">
  <label for="time">Time</label>
  <input type="text" name="time" id="time" />
  <div class="errorMsg">Invalid Time Format</div>
</div>
<div class="group">
  <label for="time2">Time2</label>
  <input type="text" name="time2" id="time2" />
  <div class="errorMsg">Invalid Time Format</div>
</div>