title: How can I add an empty element to a tree of elements styled with flex without changing the design?
body: <p>I want to add an empty element say a div or span below css.searchBarDiv closing below the css.searchBarButton without changing the look. Currently, if I do that it moves the search button to the next line and hides the css.searchBarInput div.</p>
  <p>Here's the code for reference:</p>
  <pre><code>&lt;div className={css.searchBarBorder}&gt;
            &lt;div className={css.searchBarBase}&gt;
  
              &lt;div className={css.searchBarFirstDiv}&gt;
                &lt;label className={css.searchBarLabel} htmlFor=&quot;location-search-input&quot;&gt;
                  &lt;div className={css.searchBarFirstDivContent}&gt;
                    &lt;div className={css.searchBarHeadingFont}&gt;Location&lt;/div&gt;
                    &lt;input
                      id=&quot;location-search-input&quot;
                      className={css.searchBarInput}
                    /&gt;
                  &lt;/div&gt;
                &lt;/label&gt;
              &lt;/div&gt;
  
              &lt;div className={css.seperator} /&gt;
  
              &lt;div className={css.searchBarDiv}&gt;             {/*Enter an empty element below this*/}
                &lt;div className={css.datePartStyling}&gt;
                  &lt;div className={css.searchBarDivContent}&gt;
                    &lt;div className={css.searchBarHeadingFont}&gt;Date&lt;/div&gt;
                    &lt;div className={css.searchBarInput}&gt;Add when you want to go&lt;/div&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
                &lt;div className={css.searchBarButton}&gt;
                  &lt;a className={css.button}&gt;Search&lt;/a&gt;
                &lt;/div&gt;
              &lt;/div&gt;
  
            &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>
  <p>Here's the CSS:</p>
  <pre><code>.searchBarBorder {
    position: relative;
    width: 100%;
  }
  .searchBarBase {
    display: flex;
    flex: 1 1 0%;
    height: 100%;
    min-width: 0px;
  }
  .searchBarFirstDiv {
    flex: 1 0 0%;
    min-width: 0px;
  }
  .seperator {
    align-self: center;
    flex: 0 0 0px;
    height: 32px;
  }
  .searchBarDiv {
    display: flex;
    min-width: 0px;
    flex: 0.95 0 auto;
  }
  .datePartStyling {
    flex: 1 0 0% !important;
    width: 0px !important;
  }
  .searchBarButton {
    flex: 0 0 auto;
    align-self: center;
  }
  </code></pre>
  <p>Kindly guide me on how can this be done. All answers would be appreciated.</p>