title: How to merge two divs
body: <p>I have two divs which should looks like one figure. The problem is with the border of the circular block. See pic. below. css were added below</p>
  
  <p><img src="https://i.stack.imgur.com/lRC6u.png" alt="input and output needed"></p>
  
  <pre><code>#nameWidgeteMain {
    width: 279px;
    height: 400px;
    top: 0px;
    position: absolute;
    background-color: rgb(237,237,237);
    border: 1px solid #dbe0e3;
    box-shadow: 0 0 20px rgba(0,0,0,0.08)
  }
  .nameWidgeteCloseArea {
    position: absolute;
    width: 22px;
    height: 31px;
    top: 7px;
    left: 270px;
    background-color: rgb(237,237,237);
    color: white;
    border: 1px solid #dbe0e3;
    border-top-left-radius: 50%;
    border-top-right-radius: 50%;
    border-bottom-right-radius: 50%;
    border-bottom-left-radius: 50%;
    text-align: center;
  }
  
  #nameWidgeteCloseTitle {
    padding-top: 5px;
    left: auto;
    font-family: sans-serif;
    font-size: 12pt;
    color: rgb(158, 158, 158);
  }
  </code></pre>