Understanding of CSS: Position - css

Question

I have a question about the CSS property: Position
As I was creating a page that looks this:
As you can see, there is a table and div next to each other. The following codes shows that how I achieve this:
Code Structure:
<div className="daily-task-view">
<table{...getTableProps()}>
<thead >
{headerGroups.map(headerGroup => (
<tr className="table-header-row"{...headerGroup.getHeaderGroupProps()}>
{headerGroup.headers.map(column => (
<th {...column.getHeaderProps(column.getSortByToggleProps())} className={
column.isSorted
? column.isSortedDesc
? "sort-desc"
: "sort-asc"
: ""
} ><h5 className="table-header-head"><b>{column.render("Header")}
</b></h5></th>
))}
</tr>
))}
</thead>
<tbody {...getTableBodyProps()}>
{page.map((row, i) => {
prepareRow(row);
return (
<tr {...row.getRowProps()}>
{row.cells.map(cell => {
return <td className="table-content" {...cell.getCellProps()}>{cell.render("Cell")}</td>;
})}
</tr>
);
})}
</tbody>
</table>
<div className="search">
<GlobalFilter filter={globalFilter} setFilter={setGlobalFilter}/>
<Button variant="success" className="button-to-add-dailytask">Add Daily Task</Button>
</div>
</div>
CSS:
.search{
margin-left:200px;
border-radius: 20px;
background-color: white;
width:fit-content;
position: absolute;
top: 10px;
left: 780px;
}
.daily-task-view{
padding-top: 10px;
padding-left: 20px;
position: relative;}
So far, the CSS that I have did presented the view that I want BUT when I Zoom In or Zoom Out, The Search which is the div tag didn't follow the action like moving the same way as the table been moving instead it didn't move and stick at that position that I set.
As I want the table and div be together so that that can act the same way (such as Zoom in/Zoom out)
What can I do, I used Absolute and Relative. Based on my understanding, both need to be together but in my case, it doesn't act that way.
Is my understanding of these 2 properties wrong?
Please Help

Answer 1

In your code now, you have the .search div inside the .daily-task-view one. This might be the issue
Here is an example of how you could achieve what I think you have in mind, by using a wrapper div and giving that display: flex, and then making .daily-task-view + .search separate and not .search inside the other. In my example I have also set widths for the div's, but it could be fit-content as well, or what you prefer.
https://codepen.io/akmalmo/pen/BapeXra
HTML
<div class="wrapper"><div class="daily-task-view">
Table
</div>
<div class="search">
Search
</div>
</div>
CSS
.wrapper{display:flex}
.search{
border-radius: 20px;
width:40%;background:red;
margin-left:20px;}
.daily-task-view{
padding-top: 10px;width:60%;background:blue;}
.daily-task-view, .search{padding:20px;}
Does this help?