<form>
    <h1>Nom du sondage</h1>

    <!--Infos-->
    <h2>{{"admin.info_section_title"|translate}}</h2>

    <label for="title">
        {{"admin.choose_title"|translate}}
    </label>
    <input type="text" name="title">

    <label for="desc">
        {{"admin.description"|translate}}
    </label>
    <textarea name="desc"> </textarea>

    <label for="name">
        {{"creation.name"|translate}}
    </label>
    <input type="text" name="name">

    <!--Params-->
    <h2>{{"admin.settings_section_title"|translate}}</h2>
    <h3>{{"visibility.title"|translate}}</h3>

    <section class="row">
        <label for="answer-visible">
            {{"visibility.visibility_want"|translate}}
        </label>
        <select name="answer-visible">
            <option value="all" selected>
                {{"visibility.visibility_link"|translate}}
            </option>
            <option value="per">
                {{"visibility.visibility_nobody"|translate}}
            </option>
        </select>
        <label for="answer-visible">
            {{"visibility.visibility_see"|translate}}
        </label>
    </section>

    <h3>{{"visibility.votes"|translate}}</h3>
    <section>
        <label for="vote-date">
            {{"visibility.archiving"|translate}}
        </label>
        <input type="date" name="vote-date">
    </section>
    <section>
        <label for="alter-vote">
            {{"visibility.archiving_start"|translate}}
        </label>
        <select name="alter-vote">
            <option value="yes" selected>
                {{"visibility.archiving_can"|translate}}
            </option>
            <option value="no">
                {{"visibility.archiving_can_not"|translate}}
            </option>
        </select>
        <label for="type-vote">
            {{"visibility.archiving_end"|translate}}
        </label>
        <select name="type-vote">
            <option value="solo" selected>
                {{"visibility.modfiy_their"|translate}}
            </option>
            <option value="all">
                {{"visibility.modfiy_everyone"|translate}}
            </option>
        </select>
    </section>

    <label for="del-vote">
        {{"admin.votes_deletion_desc"|translate}}
    </label>
    <button class="btn btn--alert btn--outline"
            (click)="config.deleteVotes()"
    >
        <i class="fa fa-trash"></i>
        {{'admin.votes_deletion_btn'|translate}}
        <i class="fa fa-object-group"></i></button>

    <h3>{{"admin.comments_deletion_title"|translate}}</h3>
    <label for="del-com">
        {{"admin.comments_deletion_desc"|translate}}
    </label>

    <button class="btn btn--alert btn--outline"
            (click)="config.deleteComments()"
    >
        <i class="fa fa-trash"></i>

        {{'admin.comments_deletion_btn'|translate}}
        <i class="fa fa-comments-o"></i></button>

    <h3>{{"admin.archiving_title"|translate}}</h3>
    <section class="row">
        <label for="arch">
            {{"admin.archiving_desc"|translate}}
        </label>
        <input type="date" name="arch">
    </section>

    <h3>{{"visibility.access"|translate}}</h3>
    <section class="row">
        <label for="password">Je</label>
        <select name="password">
            <option value="yes" selected>
                {{"visibility.access_want_yes"|translate}}
            </option>
            <option value="no">
                {{"visibility.access_want_no"|translate}}
            </option>
        </select>
        <label for="alter-vote">
            {{"visibility.access_protect"|translate}}
        </label>
    </section>

    <h3>{{"admin.deletion"|translate}}</h3>
    <label for="del"> {{"admin.deletion_desc"|translate}} </label>
    <input class="btn btn--alert" type="submit"
           name="del" value="{{'admin.deletion_btn'|translate}}">

    <!-- Access link -->
    <h2>{{"admin.link"|translate}}</h2>
    <h3>{{"admin.link_admin"|translate}}</h3>

    <label for="copy-link-admin">
        {{"admin.link_admin_desc"|translate}}
        https://framadate.org/urladmindusondage
    </label>
    <input class="btn btn--mini" type="submit" name="copy-link-admin"
           value="{{'admin.copy_link'|translate}}">
    <a href="#" class="next">{{"admin.link_admin_btn"|translate}}</a>

    <h3>{{"admin.polled_people"|translate}}</h3>
    <label for="copy-link">
        {{"admin.polled_people_desc"|translate}}
        {{config.urlPublic}}</label>
    <input class="btn btn--mini" type="submit" name="copy-link"
           value="{{'admin.copy_link'|translate}}">
    <a href="#" class="next">{{"admin.polled_people_btn"|translate}}</a>

    <h3>{{"admin.email_links"|translate}}</h3>
    <label for="mail">{{"admin.email_links_desc"|translate}}</label>
    <input type="email" name="mail">
    <input class="btn btn--mini" type="submit" name="send-mail"
           value="{{'admin.email_links_btn'|translate}}">

</form>
<p-confirmDialog header="Confirmation" icon="pi pi-exclamation-triangle"></p-confirmDialog>

./admin.component.scss

form{
  display:flex;
  flex-direction: column;
  width:340px;
margin:auto;
}
.row{
  flex-direction: row;
  flex-wrap: wrap;
  padding-bottom: 65px;
}
textarea{
  height:115px;
  margin-bottom: 50px;
}
label{
  padding-bottom: 10px;
  flex-wrap: wrap;
}
h2,h1{
  margin-bottom: 40px;
}
h2{
  margin-top: 40px;
  padding-left:16px;
}
.btn--alert{
  font-weight: 600;
}
h3{
  padding-left: 28px;
  padding-bottom:15px;
}
select,input[type=date]{
  max-width: 130px;
}
.btn--outline{
  margin-bottom: 70px;
}