Solution 1 :

I recommend to use flexbox to locate your divs. And use classes instead inline styles.

.todo-list {
  display: flex;

.todo-list__ul {
  margin: 0 20px;
    <div class="todo-list">
                <ul class="todo-list__ul">
                    <li>item 1</li>
                    <li>item 2</li>
                    <li>item 3</li>
              <textarea rows="10" cols="50" ></textarea>

Problem :

I am quite new to html/css and I am currently trying to basically create a to-do list website with a note section for each item.
Should look like this:

To-Do | Notes
IB    | IB 
Item1 | Notes about item 1 
Item2 | Notes about item 1

IB – Input box
Assuming item 1 is selected

I want to have the to-do list and the notes separate with their own scrolling functions.
I currently got the to-do list to work but when I start working on the notes section, everything shifts down on the in the notes when a new to-do item is added. You can see my current HTML below and I can include css and js if needed. In essence, I am trying to split the screen vertically resulting in two different div sections that don’t interfere with each other. Thank you for any kind of help.

<!DOCTYPE html>
    <link rel="stylesheet" type="text/css" href="temppagestylesheet.css"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>Task Planner</title>

    <!-- Heading -->
        <h1 id="logo"> <a class="link" href="#">Task Planner</a></h1>
        <h2 class="profile"> Name Placeholder </h2>
        <hr style="clear:both;" color="black">

    <!-- Left Subsection -->
    <div class="vertical"></div>
    <!-- To-Do List -->
        <h2 id="todotitle">My To Do List</h2>
        <input type="text" id="myInput" placeholder="Task...">
        <div onclick="newElement()" class="addBtn">Add</div>

        <hr style="width:24%;text-align:left;margin-left:0">

        <ul id="todoList"></ul>

        <script src="todolist.js"></script>

    <!-- Right Subsection -->
    <!-- Notes Section -->
        <textarea rows="10" cols="50" style="resize: none; float: right;" ></textarea>