Generated by SassMeister.com.

input.scss

body, * {
    background-color: #102F70;
    margin: 0;
    padding: 0;
}

%input-default {
	background-color: #FFFFFF;
	border: 1px solid #D5D5D5;
	border-radius: 6px;
	height: 26px;
	padding: 0 10px;
	font-weight: normal;
	font-size: 13px;
}

@mixin input-style($width) {
	@extend %input-default;
	width: $width;	
}

.ape-newsletter {
    div {
        display: flex;
        flex-direction: row;
        gap: 14px;
        height: fit-content;
        
        p {
            display: flex;
            flex-direction: column;
        }
    }
    
    label {
        color: #fff;
        font-size: 15px;
    }
    input:not(input[type="checkbox"]) {
        @include input-style(330px);
    }
    input[type="checkbox"] {
        margin-top: 11px;
    }
    button#registerNewsletter {
        width: 35px;
        height: 28px;
        border: none;
        border-radius: 4px;
        background-color: #fff;
        cursor: pointer;
        font-size: 16px;
        align-self: flex-end;
    }
}

markup.html

<section class="ape-newsletter">
	<div>
      <p>
          <label for="name">
              <span>Nome</span>
              <strong>*</strong>
          </label>
          <input type="text" id="name" />
      </p>

      <p>
          <label for="email">
              <span>Email</span>
              <strong>*</strong>
          </label>
          <input type="email" id="email" />
      </p>

      <button id="registerNewsletter">&#5171;</button>
    </div>
    
    <label for="privacyPolicies">
    	<input type="checkbox" id="privacyPolicies" />
     	Aceito a política de privacidade
  	</label>
</section>

output.css

body, * {
  background-color: #102F70;
  margin: 0;
  padding: 0;
}

.ape-newsletter input:not(input[type=checkbox]) {
  background-color: #FFFFFF;
  border: 1px solid #D5D5D5;
  border-radius: 6px;
  height: 26px;
  padding: 0 10px;
  font-weight: normal;
  font-size: 13px;
}

.ape-newsletter div {
  display: flex;
  flex-direction: row;
  gap: 14px;
  height: fit-content;
}
.ape-newsletter div p {
  display: flex;
  flex-direction: column;
}
.ape-newsletter label {
  color: #fff;
  font-size: 15px;
}
.ape-newsletter input:not(input[type=checkbox]) {
  width: 330px;
}
.ape-newsletter input[type=checkbox] {
  margin-top: 11px;
}
.ape-newsletter button#registerNewsletter {
  width: 35px;
  height: 28px;
  border: none;
  border-radius: 4px;
  background-color: #fff;
  cursor: pointer;
  font-size: 16px;
  align-self: flex-end;
}

settings.json

{
  "sass": {
    "compiler": "dart-sass/1.26.11",
    "extensions": {},
    "syntax": "SCSS",
    "outputStyle": "expanded"
  },
  "autoprefixer": false
}