Why doesn't the legend on the form follow the styling rules?

Question

css

I'm trying to style the form so that in the mobile version the legend in the fieldset block is at the top above the inputs (which are combined into one block), and in the tablet and desktop versions the legend should be to the left of the input block. To do this, their parent block fieldset wrote display: flex;
But for some reason, the legend does not obey the rules of the flex block element and does not line up with the block with inputs. If I replace the legend tag with a p tag or wrap the legend in a div, then everything becomes normal. But how to make the legend obey the styling?
Markup:

<form action="" >
          <fieldset class="form__block">
            <legend class="form-title">Тип</legend>
            <div>
              <p class="form__row">
                <label for=""><input type="radio">Аксессуар для интерьера</label>
              </p>
              <p class="form__row">
                <label for=""><input type="radio">Детская игрушка</label>
              </p>
            </div>
          </fieldset>
</form>

Styles:

.form__block {
  margin: 0;
  padding: 0;
  border: 0;

  @media(min-width: @width-tablet) {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: nowrap;
    padding-left: 50px;
    padding-right: 50px;
  }
}

.form-title {
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0;
  color: #63d1bb;
  font-weight: bold;
  text-transform: uppercase;

  @media(min-width: @width-tablet) {
    width: 167px;
   
  }

  @media(min-width: @width-desktop) {
    width: 175px;
    text-align: center;
  }

  &::after {
    content:"";
    position: absolute;
    right: 0;
    top: 50%;
    width: 196px;
    height: 1px;
    background-color: #63d1bb;

    @media(min-width: @width-tablet) {
      content: none;
    }
  }
}

.form__row {
  margin: 0;

  @media(min-width: @width-tablet) {
    width: 500px;
  }
}

Design: