style.css

body {
    display: flex;
    height: 100vh;
    margin: 0;
    padding: 10px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 20px;
  }

  #inputContainer, #outputContainer {
    flex: 1;
    display: inline;
    overflow: hidden;
    box-sizing: border-box;

    position: relative;

  }

  #inputText {
    width: 100%;
    box-sizing: border-box;
  }

  #outputImage {
    position: relative;
    white-space: pre-wrap;
    user-select: none;
  }

  .draggable {

    background-color: #4CAF50;
    display: inline-flex;
    cursor: grab;
    position: absolute;
    margin-top: 0;
    margin-bottom: 0;
    z-index: 1; 
  }

  .draggable:hover {
    background-color: #45a049;
  }

  .droppable {
    height: 20px;
    border-bottom: 2px dashed #000;
    position: relative;
    z-index: 0; 
  }

  .draggableClone {
    position: absolute;
  }

  #armazemdeacordes {
    flex: 1;
    display: flex; /* Use flex container */
    overflow: hidden;

    background-color: blueviolet;
    width: 10px;
    flex-direction: row; /* Set the direction to row */
  }

  .newLine{
    height: 1.5 em;
    align-items: center; 
    text-align: center;
    width: 100%;
    display: flex;
    background-color: rgb(224, 224, 224);

  }