How to display one html element over common boundary between other two html elements? - html

Question

I want to display one HTML element (in my case it's the swap-button with a paired arrows) over the common border between the other two elements (in my case these are input boxes).
But my swap-button goes to the start of the page.
HTML
<div style={{
display: "flex",
flexFlow: "row",
justifyContent: "center",
alignItems: "center"
}}>
{/* origin input */}
<div
style={{
marginTop: this.state.marginTop,
border: "1px solid rgb(36, 2, 2)"
}}
>
<h5 style={{ color: "white" }}>ORIGIN OF SHIPMENT</h5>
<Dropdown name="origin" placeholder="ORIGIN OF SHIPMENT" />
</div>
{/* swap button */}
<div>
<h5>
<span style={{ display: "inline-block", width: "0px" }}>
</span>
</h5>
<Button
type="default"
size="small"
className={[this.state.css, "swap-button"]}
shape="circle"
onClick={this.onSwapLocation}
>
<Icon type="swap" />
</Button>
</div>
{/* destination input */}
<div style={{ marginTop: this.state.marginTop }}>
<h5 style={{ color: "white" }}>DESTINATION OF SHIPMENT</h5>
<Dropdown
name="destination"
placeholder="DESTINATION OF SHIPMENT"
/>
</div>
</div>
CSS
.swap-button {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
z-index: 100;
background-color: var(--whiteColor);
color: var(--blueColor);
}
Expected swap-button image: [2:
Actual swap-button image: :
I will appreciate your reply. thank you.
Edit01: I just want to show that swap-button over the other two input boxes. I have already written HTML and CSS. but when I use position: absolute the swap-button goes to start. I think I need some help in CSS (i.e. .swap-button class)

Answer 1

You have to add an extra container to the swap button and Destination of Shipment input so you can position the swap button precisely in the middle using position absolute just like you are doing.
body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
.container {
display: flex;
flex-direction: row;
}
.swap-container {
position: relative;
}
button {
position: absolute;
background: #0084ff;
top: 10px;
left: -15px;
border: none;
border-radius: 5px;
padding: 3px;
font-size: 8px;
color: #fff;
}
input {
padding: 10px;
}
<div class="container">
<input type="text" value="Origin of Shipment"/>
<div class="swap-container">
<button>Swap</button>
<input type="text" value="Destination of Shipment"/>
</div>
</div>

Answer 2

input#addr_from {
border-right: 1px solid #cad3db;
}