如何实现行内三元素两侧绿黄背景延伸至中间且不覆盖中间红色按钮

下方是当前输出效果的演示截图：

需要实现的布局效果：行/div内有三个元素，分别是左侧带绿色背景的确认图标、中间红色姓名牌按钮、右侧带黄色背景的拒绝图标，要求绿色和黄色背景分别向侧边延伸后在中间交汇，且不会覆盖中间姓名牌按钮的红色区域。

以下是可直接查看、测试的代码片段，JavaScript部分开头已添加简单示例数据：

JavaScript代码 #

var interests = document.getElementById("interests")
var data = '[{"firstName" : "Jeff", "lastName" : "Relikeson", "interests" : "3", "pickupLine" : "1"}, {"firstName" : "Harry", "lastName" : "Jackson", "interests" : "2", "pickupLine" : "1"}, {"firstName" : "Bob", "lastName" : "Greene", "interests" : "coding", "pickupLine" : "1"}, {"firstName" : "Jay", "lastName" : "Ding", "interests" : "coding", "pickupLine" : "1"}, {"firstName" : "Jay", "lastName" : "Ding", "interests" : "coding", "pickupLine" : "1"}, {"firstName" : "Brendon", "lastName" : "Hairson", "interests" : "1", "pickupLine" : "1"}]';

load()
function load() {
    setTimeout( load, 30);
    var dataParsed = JSON.parse(data);
    var interestsVar = document.getElementById("interests").innerHTML
    var result = dataParsed.filter(x => x.interests === interestsVar);
    var matchesID = document.getElementById("matches")
    for (var i = 0; i < result.length; i++) {
        var buttonCreate = document.createElement("button");
        buttonCreate.innerHTML = result[i].firstName + " " + result[i].lastName + ";" + "<p class='greenColor'>" + result[i].interests + "</p>" + "Pickup Line:" + " " + result[i].pickupLine;

        if (document.getElementById("matches").innerHTML.includes(buttonCreate.innerHTML)) {

        } else {
            var br = document.createElement("br")
            var br2 = document.createElement("br")
            var br3 = document.createElement("br")
            var div = document.createElement("div")
            var yesIcon = document.createElement("i")
            var noIcon = document.createElement("i")
            yesIcon.innerHTML = "<i class='fa fa-check-square-o fa-5x' aria-hidden='true'></i>"
            noIcon.innerHTML = "<i class='fa fa-ban fa-5x' aria-hidden='true'></i>"
            var uniqueID = Date.now();
            div.id = uniqueID;
            div.className = "wrapper"
            const matchedIDs = [1];
            matchedIDs.push (uniqueID);
            console.log(matchedIDs)
            
           
            matchesID.appendChild(br)
            matchesID.appendChild(br2)
            matchesID.appendChild(div)
            var divID = document.getElementById(uniqueID)
            divID.appendChild(yesIcon)
            divID.appendChild(buttonCreate)
            divID.appendChild(noIcon)
            yesIcon.className = "yesIcon"
            buttonCreate.className = "matchesDIVs"
            noIcon.className = "noIcon"
            matchesID.appendChild(br3)
            sleep(1);
        }
    }
}

function buttonCreate() {
    var array = JSON.parse(data);
    var resultBoxs = document.getElementById("resultBoxs");
    for (var i = 0; i < array.length; i++) {
        var buttonCreate = document.createElement("button");
        buttonCreate.type = "button";
        buttonCreate.innerHTML = array[i].firstName + " " + array[i].lastName + "; " + array[i].interests + " " + array[i].pickupLine;

        if (resultBoxs.innerHTML.includes(buttonCreate)) {

        } else {
            var br = document.createElement("br")
            var br2 = document.createElement("br")
            buttonCreate.className = "contendersList"
            resultBoxs.appendChild(buttonCreate)
            resultBoxs.appendChild(br);
            resultBoxs.appendChild(br2);
        }
    }
}

CSS代码 #

.matchesDIVs {
    box-shadow: 10px 16px 17px -1px #8a2a21;
    background:linear-gradient(to bottom, #c62d1f 5%, #f24437 100%);
    background-color:#c62d1f;
    border-radius:37px;
    border:8px solid #d02718;
    display:inline-block;
    cursor:pointer;
    color:#ffffff;
    font-family:Verdana;
    font-size:1000%;
    font-weight:bold;
    font-style:italic;
    padding:10% 10%;
    text-decoration:none;
}
.matchesDIVs:hover {
    background:linear-gradient(to bottom, #f24437 5%, #c62d1f 100%);
    background-color:#f24437;
}
.matchesDIVs:active {
    position:relative;
    top:1px;
}

.container {
  position: relative;
  height: 5000px;
}
.center {
  margin: 0;
  position: absolute;
  left: 50%;
  -ms-transform: translate(-50%);
  transform: translate(-50%);
}


.greenColor {
    color: green;
}

.yesIcon {
    background: limegreen;
    box-sizing: border-box;
}
.noIcon {
    background: gold;
}
.wrapper {
  display: flex;
  flex-direction: row;
  align-items: center
}

HTML代码 #

<html>
<head>
<script type="text/javascript" src="data.json"></script>
<title>Algorithm</title>
<link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>

<body onload="load(), buttonCreate()">

    <h1 id="interests" class="interests" contenteditable="true">Your interests</h1>
<div id="resultBoxs"></div>


<div class="container"> 
    <div id="matches" class="center"></div>
</div>

<br>
<br>
<button onclick="openAuth()">open Auth</button>

</body>

</html>

内容的提问来源于stack exchange，提问作者Robot123