How can I merge 2 elements in HTML-CSS-JS?

Question

I want to merge 2 elements(buttons, to be precise) into 1 in HTML & CSS, with if needed, Javascript.
Here's the HTML-CSS code:

#downloadButtonDiv {
  display: flexbox;
  justify-content: left;
}

#downloadButton {
  background-color: #00B0F0;
  margin: 5px;
  border: 1px;
  border-color: #00B0F0;
  outline: none;
  border-radius: 5px;
  padding-right: 0cm;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 25px;
  height: 75px;
  width: 275px;
}

#downloadButtonIcon {
  background-color: #23a5d4;
  margin: 5px;
  border: 1px;
  border-color: #23a5d4;
  outline: none;
  border-radius: 5px;
  padding-left: 0cm;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 25px;
  height: 75px;
  width: 120px;
}

<div id="downloadButtonDiv">
  <button type="button" id="downloadButton">Download</button>
  <button type="button" id="downloadButtonIcon"><img src="#" width=50/></button>
</div>

This produces 2 buttons, side-by-side, but not merged together. Even nesting buttons inside another doesn't help. What should I do?

Here's how I want my button to look like(exclude the gray background, of course.):

The Image was made in Figma, if anybody was wondering.

Answer 1

You can try something like this:

.downloadButton {
  display: grid;
  grid-auto-flow: column;
  place-items: center;

  background-color: #00B0F0;
  margin: 5px;
  border: 1px;
  border-color: #00B0F0;
  outline: none;
  border-radius: 5px;
  padding-right: 0cm;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 25px;
  height: 75px;
  width: 275px;
}

  <button type="button" class="downloadButton"><img src="https://picsum.photos/32/32" width=50/><span>Download</span></button>