I am wondering why my buttons aren't equal to each other since both HTML and CSS code is exactly the same.

[![enter image description here](https://i.stack.imgur.com/52J6d.png)](https://i.stack.imgur.com/52J6d.png)

**HTML code:**

```
   <div class="export-left">    
    <button type="button" class="formreturn" value="Copy Url" onclick="Copy();">Copy Url</button>
    <label><input type="text" class="txtfilename" id="op-text-filename" placeholder="type file name"/>.txt</label>
    <button type="button" class="formreturn" onclick="saveURLtoTXTfile();"><span class="glyphicon glyphicon-download"></span>.TXT</button>  
    </div>
    <div class="export-right">
    <button type="button" class="excelsubmit" onclick="exportData()"><span class="glyphicon glyphicon-download"></span>.CSV</button>
    <button type="button" id="btnExport" class="excelsubmit" onclick="fnExcelReport();"><span class="glyphicon glyphicon-download"></span>.XLS </button>
    </div>

```

**CSS**

```
 .export {
display: flex;
align-items: flex-start;
}

 .export-left {
display: flex;
 }
 .export-right {
  margin-left: auto;
  }

  .formreturn {
  font-weight:700;
  text-decoration: none;
  color:black;
  background:#c6e2f2;
  padding: 8px;
  border-radius: 3px;   
  }

  .excelsubmit {
  font-weight:700;
  float: right;
  padding: 8px;
  background:#c6e2f2;
  border-radius: 3px;
  }

```

Where have I made mistake? I want these buttons in the same size (height) roughly. Unfortunately, the padding `didn't` work here.