/* FLEX WRAPPER FOR COUNTRY + PHONE */
.phone-group {
  display: flex;
  margin: 10px 0;
}

/* COUNTRY SELECT */
.phone-group select {
  flex: 0 0 80px;       /* fixed width for the flag+code */
  padding: 15px 8px;
  background: #222;
  color: #fff;
  border: none;
  border-radius: 5px 0 0 5px;
  font-size: 1em;
  appearance: none;      /* remove native arrow */
  background-image: url("data:image/svg+xml;utf8,\
    <svg xmlns='http://www.w3.org/2000/svg' width='10' height='5'>\
      <path fill='white' d='M0 0 L5 5 L10 0z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 8px center;
}

/* PHONE INPUT */
.phone-group input[type="tel"] {
  flex: 1;               /* take remaining space */
  padding: 15px;
  background: #222;
  color: #fff;
  border: none;
  border-radius: 0 5px 5px 0;
  font-size: 1em;
}

/* FOCUS STATE FOR BOTH */
.phone-group select:focus,
.phone-group input[type="tel"]:focus {
  outline: none;
  box-shadow: 0 0 10px #4a90e2;
}