CSS выровнять блоки до одной границы

Есть форма, в которой размещены поля для ввода информации. Из-за того, что заголовки полей разной длины, а у полей одинаковая ширина, все идет вразнобой. Подскажите пожалуйста, возможно ли как-то подстроить все поля под одну линию (на скриншоте обозначено красной линией), чтобы они все встали в один ряд?

Пробовал ограничить width для каждого поля, к сожалению он их только уменьшает, но под одну линию не обрезает.

Код страницы HTML:

<div class="main">
    <div class="container">
            <div class="user_info">
            <form method="post" enctype="multipart/form-data" class="form">
            {% csrf_token %}

            <div class="user_fullname_header">
                <h3 class="header">Полное имя</h3>
            </div>

            <div class="rows">
                <p>Фамилия<span class="asterix">*</span> : {{ user_form.last_name }}</p>
                <p>Имя<span class="asterix">*</span> : {{ user_form.first_name }}</p>
                <p>Отчество<span class="asterix">*</span> : {{ profile_form.patron }}</p>
            </div>
            </form>
    </div>
</div>

Код CSS

.main {
  margin: 2% 25%;
  padding: 2%;
  background-color: #f5f5f5;
  box-shadow: 5px 5px 5px #edebeb;
}

.container {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  font-family: 'Inter', sans-serif;
}

.user_info{
  width: 70%;
}

.rows {
  display: flex;
  flex-direction: column;
}

.user_fullname_header {
  background-color: #64a2bd;
  border-radius: 20px;
}
.header {
  padding: 1% 0% 1% 3%;
  font-size: 17px;
  color: white;
}

p {
  margin-left: 5%;
  margin-top: 1%;
  margin-bottom: 1%;
}

.form-input {
  margin-left: 1%;
  padding: 1% 1% 1% 2%;
  width: 55%;
  border: 1px solid #64a2bd;
  border-radius: 15px;
}