Positioning the svg on top like this

[asasass]

Where I can move it up down left or right without messing up the rest of the code.

In the main code the svg would be floated, and so, how do you add margins to a floating svg?

Main Code:

Edit fiddle - JSFiddle - Code Playground

svg code:

Edit fiddle - JSFiddle - Code Playground

[Ray.H]

Try this…

    <div class="container">
      <div class="left">
        <button id="button">Play / Pause</button>
      </div>
      <div class="right">svg here</div>
    </div>

Then for the relevant CSS…

.container {
  display: flex;
  border: 1px solid lime;
  justify-content: space-between;
  align-items: end;
  margin-bottom: 20px;
}

.left {
  margin: 0;
}
.right {
  width: 80px;
  height: 80px;
  background: red; /*simulating svg img*/
}

Then take the 20px bottom margin off your button, I put it on the .container above.

button {
  font-size: 22px;
  height: 29px;
  cursor: pointer;
  background: green;
  border: 1px solid #0059dd;
  white-space: nowrap;
  font-family: "Times New Roman", Times, serif;
  /*margin-bottom: 20px;*/
}

All that should give you this…

The red line beside your clear input is coming from the red background here…

.container-right {
  float: right;
  /*background: red; /*remove this*/
}