is anyone here using Elementor?

I’m trying to create a header with Elementor. 3 columns, I have a logo in the left, search bar in the middle and a navigation menu on the right side.

Basically, what I wanted to achieve is something like this.
Expected Output

But what I’m currently done is Output

Adding a border on it Output-with-Border

Here is the issue when the screen/window is resized Issue

Where it should be something like this Expected-output-on-resize

To give you more details, I wanted to achieve the same functionality as the below code on Elementor.

.container {
  margin: 0;
  padding: 0;
  list-style-type: none;
  display: flex;
  flex-wrap: wrap;
}

.flex {
  background: #6AB6D8;
  padding: 10px;
  margin-bottom: 50px;
  border: 3px solid #2E86BB;
  color: white;
  font-size: 20px;
  text-align: center;
  position: relative;
}

.flex:after {
  position: absolute;
  z-index: 1;
  left: 0;
  top: 100%;
  margin-top: 10px;
  width: 100%;
  color: #333;
  font-size: 18px;
}

.flex1 {
  flex-basis: auto;
}

.flex1:after {
  content: 'auto';
}

.flex2 {
  flex: 1;
  flex-basis: fill;
}

.flex2:after {
  content: 'fill-remaining-space';
}

.flex3 {
  flex-basis: min-content;
}

.flex3:after {
  content: 'min-content';
}

<ul class="container">
  <li class="flex flex1"><div style="background: #000; width: 200px;">Logo</div></li>
  <li class="flex flex2"><div style="background: #000; width: 100%; margin-right: 10px; margin-left-10px;">Search-Bar</div></li>
  <li class="flex flex3"><div style="background: #000; width: 350px;">Navigation Menu</div></li>
</ul>