title: How can I align three box in same line using flexbox in css?
body: <p>In my project, I want to design a shipping address design with HTML and css(flexbox). And i want to design &quot;city&quot;,&quot;zip code&quot;,&quot;state&quot;, box in one line like this  <a href="https://i.stack.imgur.com/yS3Fh.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/yS3Fh.png" alt="like this" /></a></p>
  <p>but in my code, I am unable to do like that design so help me to what changes should I have done to get that result?
  And my code results shows is like this  <a href="https://i.stack.imgur.com/tKItI.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/tKItI.png" alt="like this" /></a></p>
  <p>So I want &quot;city&quot;,&quot;zip code&quot;,&quot;state&quot; box takes same size fit to the &quot;ad</p>
  <p><strong>Here is my code</strong></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.shipping-containers {
    height: 100vh;
    width: 100%;
    border: 2px solid black;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    background: red;
    justify-content: center;
    align-items: center;
  }
  
  .shipping-wrapper {
    display: flex;
    flex-direction: column;
    width: 70%;
    background: lightskyblue;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
  }
  
  .shipping-wrapper&gt;form {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 1px solid black;
  }
  
  .shipping-div {
    display: flex;
    flex-direction: row;
    margin-right: 15rem;
    justify-content: center;
    align-items: center;
  }
  
  .shipping-div input {
    text-align: center;
    justify-content: center;
    align-items: center;
  }
  
  .shipping-wrapper input {
    width: 50%;
    font-size: 10px;
    padding: 15px;
    background: #f1f1f1;
    margin-bottom: 10px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="shipping-containers"&gt;
    &lt;div class="shipping-wrapper"&gt;
      &lt;form&gt;
        &lt;input type="text" placeholder=" name" /&gt;
        &lt;input type="text" placeholder=" address" /&gt;
        &lt;div class="shipping-div"&gt;
          &lt;div&gt;
            &lt;input type="text" placeholder=" city" class="shipping-input" /&gt;
          &lt;/div&gt;
          &lt;div&gt;
            &lt;input type="text" placeholder=" zip code " class="shipping-input" /&gt;
          &lt;/div&gt;
          &lt;div&gt;
            &lt;input type="text" placeholder=" state" class="shipping-input" /&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;input type="text" placeholder=" Country" class="shipping-input" /&gt;
        &lt;button&gt;Continue&lt;/button&gt;
      &lt;/form&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>