how to display part of a text in a straight line?-CodePudding

This is a price calculator and my problem at the moment is that when hovering over "Info" it will display the prices but i want that everything after Benutzer is in a straight line so it looks pleasing to the eyes.I tried using display:inline but my problem is that i embed html in my function "printPreisstaffel".How can i display it in a straight line?

function printPreisstaffel(preisstaffel, idelement) {
  document.getElementById(idelement).innerHTML ="";
  for (var key in preisstaffel) {
    document.getElementById(idelement).innerHTML  = `<div >Bis ${key} Benutzer : ${(preisstaffel[key]).toFixed(2)}€ </div>`;
    
  }
}

var percent = 1; //Standardvalue for yearly

//Preisstaffelung für app und backend
apppreis = 7.5;
backendpreis = 35;
//Preisstaffelung Zeiterfassung Rechnungswesen für Backendpreis
var pricingbackendzr = { 4: 35.00, 10: 32.50, 20: 30.00 };
var pricingbackendz = { 4: 20.00, 10: 18.00, 20: 16.00 };
var pricingapp = { 10: 7.50, 25: 7.00, 50: 6.50, 75: 6.00, 500: 5.50 };

//diese funktion wird ausgelöst wenn das html-dokument vollstaendig geladen wird
document.addEventListener("DOMContentLoaded", function (event) {

  var updatecolor = document.querySelectorAll('.updatecolor');

  document.querySelectorAll(".updatecolor").forEach(updateinputs =>
    updateinputs.addEventListener("input", function () {
      var percent = calcPercent(this.value, this.min, this.max);
      const bg = getComputedStyle(this).getPropertyValue('--background');
      const slider = getComputedStyle(this).getPropertyValue('--slider');
      var colorchanger = this.getAttribute('rangecolorid');
      var sliderselect = document.querySelector('#'   colorchanger);
      sliderselect.setAttribute(
        'style',
        ` background:linear-gradient(to right,${slider},${slider} ${percent}%,${bg} ${percent}%) `
      )
    })
  );

  //document.getElementById("preisstaffelapp").innerHTML  = `Bis ${apppreisstaffel} Benutzer: ${apppreisstaffel}€`;

  //Preisstaffeln anzeigen
  //1.) Hole die Werte aus pricing backend zdr usw. --> Schreibe die in das popover rein --> Tipp: Es muss mit einem FOreach gehen
  //2.) MAche das auch für die Preise von App Benutzer
  



  printPreisstaffel(pricingapp, "preisstaffelapp");
});

function printPreisstaffel(preisstaffel, idelement) {
  document.getElementById(idelement).innerHTML ="";
  for (var key in preisstaffel) {
    document.getElementById(idelement).innerHTML  = `<div >Bis ${key} Benutzer : ${(preisstaffel[key]).toFixed(2)}€ </div>`;
    
  }
}

//funktion damit der Slider sich beim eingeben vom input field bewegt
function updateUser(val, inputtype) {
  if (inputtype == 'Appuserrangecolor') {
    document.getElementById('AppInput').value = val;
  }
  if (inputtype == 'AppInput') {
    document.getElementById('Appuserrangecolor').value = val;
  }
  if (inputtype == 'Backendrangecolor') {
    document.getElementById('BackendInput').value = val;
  }
  if (inputtype == 'BackendInput') {
    document.getElementById('Backendrangecolor').value = val;
  }
  calcSum();
}

//Calculates the percentage of the currentval with the base of a min and max value
function calcPercent(curval, min, max) {
  return ((curval - min) / (max - min)) * 100;
}
function updatePreisStaffelungBackend() {
  var backendtype = document.querySelector("#backendfunktion").value;
  if (backendtype == "Z"){
    printPreisstaffel(pricingbackendz, "preisstaffelbackend");
  }else if (backendtype == "ZR") {
    printPreisstaffel(pricingbackendzr, "preisstaffelbackend");
  }  
}

//Rechnung für die Anzahl von Backend und App-Benutzern
function calcSum() {
  var preisproapp = document.querySelector('.proapp');
  var backendpreissum = document.querySelector('.backendpreissum');
  var appstk = document.querySelector('.appanzahl');
  var preisprobackend = document.querySelector('.probackend');
  var jaehrlich = document.querySelector('.jaehrlichsum');
  var summetext = document.querySelector('.summe');
  var rabatt = document.querySelector('.rabattsum');
  var backendanzahl = document.querySelector(".backenduser").value;
  var appanzahl = document.querySelector(".appuser").value;
  var paymenttype = document.querySelector("#zahlrythmus").value;
  var backendtype = document.querySelector("#backendfunktion").value;

  
  if (backendtype == "ZR") {
    backendpreis = getPrice(pricingbackendzr, percent, backendanzahl);
  } else {
    backendpreis = getPrice(pricingbackendz, percent, backendanzahl);
  }
  

  if (paymenttype == "M") {
    percent = 1.2; //standardvalue for monthly
  }

  

  apppreis = getPrice(pricingapp, percent, appanzahl);

  

  //Rechnungen für gesamtsumme
  var mytext = (((backendanzahl * backendpreis    appanzahl * apppreis) * 1)).toFixed(2);
  summetext.textContent = mytext   "€";
  //Rechnung für Backendpreissumme
  var backendpreissumme = (backendanzahl * backendpreis).toFixed(2);
  backendpreissum.textContent = backendpreissumme   "€";
  //Rechnung für Apppreissumme
  var apppreissumme = (appanzahl * apppreis).toFixed(2);
  appstk.textContent = apppreissumme   "€";
  //Rechnung für Preis pro Backendbenutzer
  var probackend2 = ((backendpreis * backendanzahl) / (backendanzahl)).toFixed(2);
  preisprobackend.textContent = probackend2;
  //Rechnung für Preis pro App-Benutzer
  var proapp2 = appanzahl > 0 ? ((apppreis * appanzahl) / (appanzahl)).toFixed(2) : apppreis.toFixed(2);
  preisproapp.textContent = proapp2;
  //If Abfrage wenn "Jaehrlich" ausgewaehlt wird
  if (paymenttype == "J") {
    var jaehrlicherrabatt = ((backendanzahl * backendpreis    appanzahl * apppreis) * 12).toFixed(2);
    jaehrlich.textContent = jaehrlicherrabatt   "€";
  }
  //Rechnung für Ersparnis
  var rabattsum = (jaehrlicherrabatt * 0.2).toFixed(2);
  rabatt.textContent = "-"   rabattsum   "€";

  
}


//Rechnung für Jaehrlich und Monatlich(10% Rabatt für Jaehrlich)
function checkHide(element) {
  var hidden = document.getElementById('hiddenMonthly');
  if (element && hidden) {
    element.value === 'M' ? (hidden.style.visibility = 'hidden') : (hidden.style.visibility = 'unset')
  }
}

function getPrice(pricemodels, percent, amount) {
  for (var key in pricemodels) {
    //If key is higher than the selected amount, return the value
    if (parseInt(key) >= parseInt(amount)) {
      return pricemodels[key] * percent;
    }
  }
}

html, body {
  background-color: rgb(255, 255, 255);
  height: 100%;
  margin: 0;
}

header{
  text-align: center;
  font-size: 20px;
}

body, table, select {
  font-size: 12px;
}
  

input[type=range]{
  border-radius: 32px;
  height: 10px;
  cursor: pointer;
}

*, *::before, *::after {
  box-sizing: border-box;
}

.grid-container {
    display: grid;
  grid-template-columns:600px 250px ;
  grid-auto-rows: minmax(150px, auto);
  justify-items: stretch;
  align-items: stretch;
}
.grid-item-1 {
  align-self: start;
  justify-self: center;
}


/* Background Styles Only */

/*@import url('https://fonts.googleapis.com/css?family=Raleway');*/



.text-grey{
  color:grey;
}


.grid-container {
  padding: 60px;
  width: 100%;
  grid-template-columns: 250px 200px;
}

#Backendrangecolor, #Appuserrangecolor, #BackendInput, #AppInput {
  --background: rgb(96,125,139,0.33);
  --slider: rgb(17, 166, 7);
  background: var(--background);
  -webkit-appearance: none;
  width: 150px;
}

.grid-item {
  padding: 20px;
  padding-top: 15px;
  background-color: #f8f8f8;
  color: #222;
  border: 7px solid rgba(96,125,139,0.33);
}

.grid-item:nth-child(odd) {
  background-color: #f8f8f8;
}

.target { 
  display: none; 
}
/* Base styling*/
body {
  background-color: lightgrey;
  max-width: 768px;
  margin: 0 auto;
  padding: 1em 0;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}


a {
  text-decoration: none;
}

.popover__title {
  font-size: 24px;
  color: rgb(73, 228, 68);

}

.popover__wrapper {
  position: relative;
  display: inline-block;
}
.popover__content {
  line-height: 15px;
  opacity: 0;
  visibility: hidden;
  position: absolute;
  left: -80px;
  transform: translate(0, 10px);
  background-color: #f8f8f8;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
  width: 170px;
  border-color: rgba(96,125,139,0.33);
  border-width: 4px;
  border-style: solid;
  
}
.popover__content:before {
  position: absolute;
  top: -8px;
  border-style: solid;
  border-width: 0 10px 10px 10px;
  border-color: transparent transparent #f8f8f8 transparent;
  transition-duration: 0.3s;
  transition-property: transform;
}
.popover__wrapper:hover .popover__content {
  z-index: 10;
  opacity: 1;
  visibility: visible;
  transition: all 0.5s cubic-bezier(0.75, -0.02, 0.2, 0.97);
}
.popover__message {
  text-align: center;
  
}

<html>
  <head>
    <link rel="stylesheet" href="styles.css">
    <script src="./app.js"></script>

    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  </head>
  <body>
    <div  >
      <div style="width: 270px">
        <header>Preiskalkulator</header>
        <div >
          App-Benutzer: <br>
          <input id="Appuserrangecolor" value="0" type="range" rangecolorid="Appuserrangecolor" min="0" max="100" oninput="updateUser(this.value, 'Appuserrangecolor');" class='appuser updatecolor'></input>
          <input class='updatecolor' style="width: 30px;border-color: var(--form_border_color);" type="text" id="AppInput" value="0" placeholder="1-100" rangecolorid="Appuserrangecolor" min="0" max="100" oninput="this.value = this.value > 100 ? 100 : Math.abs(this.value); updateUser(this.value, 'AppInput');"><br>
          Bürosoftware-Benutzer: <br>
          <input id="Backendrangecolor" value="1" type="range" rangecolorid="Backendrangecolor" min="1" max="15" oninput="updateUser(this.value, 'Backendrangecolor'); " class='backenduser updatecolor'></input>
          <input class='updatecolor' style="width: 30px;border-color: var(--form_border_color);" type="text" id="BackendInput" rangecolorid="Backendrangecolor" value="1" min="1" max="15" placeholder="1-15" oninput="this.value = this.value > 15 ? 15 : Math.abs(this.value,); updateUser(this.value, 'BackendInput');"><br>
        </div>
        <b > Bürosoftware wählen </b>
        <select style="width: 150px;background-color:rgba(96,125,139,0.33)" id = "backendfunktion" onchange = "calcSum();updatePreisStaffelungBackend()" >
          <option value="Z">Zeiterfassung</option>
          <option value="ZR"> Zeiterfassung   Rechnungswesen</option>
        </select>
        <select style="width: 150px;background-color:rgba(96,125,139,0.33)" id = "zahlrythmus" onchange = "calcSum();checkHide(this)" >
          <option onclick="('hidden')" value="J">Jährlich</option>
          <option value="M">monatlich</option>
        </select>
      </div>
      <div  style="width: 270px">
        <table style="width:100%;text-align: right;">
          <tr>
            <td style="width: 138px" >App-Benutzer
              <div >
                <div  style="font-size:10px;padding:0px;text-align: left;">Info</div>
                <div >
                  <p  style="font-size:12px;">Preisstaffelung-App</p>
                  <div id='preisstaffelapp' style="font-size: 10px !important; font: 10px !important;text-align: center;padding-bottom: 10px;">
                  </div>
                </div>
              </div>
              <br > <div class='text-grey'>pro <span  >7.50</span>€</div></td>
            <td style="width: 62px; vertical-align: top;" class='appanzahl'>0.00€</td>
          </tr>
          <tr>
            <td>Bürosoftware-Benutzer
              <div >
                <div  style="font-size:10px;padding:0px;text-align: left;">Info</div>
                <div  style="  display: inline-block;">
                  <p  style="font-size:12px;">Preisstaffelung-Büro</p>
                  <div id='preisstaffelbackend' style="font-size: 10px !important; font: 10px !important;text-align: right;padding-bottom: 10px;">
                  </div>
                </div>
              </div>
              
              <br ><div class='text-grey'>pro <span class='probackend'>20.00</span>€</div></td>
            <td class='backendpreissum' style="vertical-align: top;">20.00€</td>
          </tr>
          <tr><td colspan="2"><hr></td></tr>
          <tr>
            <td >Gesamtpreis mtl.:<br><div class='text-grey'>(zzgl. MwSt)</div></td>
            <td class='summe' style="vertical-align: top;">20.00€</td>
          </tr>
          <table id="hiddenMonthly" style="width:100%;text-align: right;">
            <tr>
              <td>Jährlich<br></td>
              <td class='jaehrlichsum' >240.00€</td>
            </tr>
            <tr class='text-grey'>
              <td>(inkl.20%)Rabatt<br></td>
              <td class='rabattsum'>0.00€</td>
            </tr>
          </table>
        </table>
        <a target="blank" href="https://solutions.stressfrei.de/">Anfrage</a>
      </div>
    </div>
  </body>
</html>

CodePudding user response：

If you refactor your html and split your pricing sentence you can give each pricing a fixed width and then align it. See codepen

<div >
  <span >Bis 10 Benutzer:</span> 
  <span >7.50€ </span>
</div>


.price-container {
    margin: auto;
}

.price-container .text {
    width: 80px;
    display: inline-block;
    text-align: right;
}

.price-container .value {
    width: 30px;
    display: inline-block;
    text-align: left;
}

CodePudding user response：

In the following example, as I said in the comments, I have removed the <br>s, I have put display:inline-block; also to the second div (the one containing "pro 7.50") but in order for it to show correctly you need to increase the <td>'s width. I already increased t show that one works fine and the other doesn't because there is not enough space

var percent = 1; //Standardvalue for yearly

//Preisstaffelung für app und backend
apppreis = 7.5;
backendpreis = 35;
//Preisstaffelung Zeiterfassung Rechnungswesen für Backendpreis
var pricingbackendzr = { 4: 35.00, 10: 32.50, 20: 30.00 };
var pricingbackendz = { 4: 20.00, 10: 18.00, 20: 16.00 };
var pricingapp = { 10: 7.50, 25: 7.00, 50: 6.50, 75: 6.00, 500: 5.50 };

//diese funktion wird ausgelöst wenn das html-dokument vollstaendig geladen wird
document.addEventListener("DOMContentLoaded", function (event) {

  var updatecolor = document.querySelectorAll('.updatecolor');

  document.querySelectorAll(".updatecolor").forEach(updateinputs =>
    updateinputs.addEventListener("input", function () {
      var percent = calcPercent(this.value, this.min, this.max);
      const bg = getComputedStyle(this).getPropertyValue('--background');
      const slider = getComputedStyle(this).getPropertyValue('--slider');
      var colorchanger = this.getAttribute('rangecolorid');
      var sliderselect = document.querySelector('#'   colorchanger);
      sliderselect.setAttribute(
        'style',
        ` background:linear-gradient(to right,${slider},${slider} ${percent}%,${bg} ${percent}%) `
      )
    })
  );

  //document.getElementById("preisstaffelapp").innerHTML  = `Bis ${apppreisstaffel} Benutzer: ${apppreisstaffel}€`;

  //Preisstaffeln anzeigen
  //1.) Hole die Werte aus pricing backend zdr usw. --> Schreibe die in das popover rein --> Tipp: Es muss mit einem FOreach gehen
  //2.) MAche das auch für die Preise von App Benutzer
  



  printPreisstaffel(pricingapp, "preisstaffelapp");
});

function printPreisstaffel(preisstaffel, idelement) {
  document.getElementById(idelement).innerHTML ="";
  for (var key in preisstaffel) {
    document.getElementById(idelement).innerHTML  = `<div >Bis ${key} Benutzer : ${(preisstaffel[key]).toFixed(2)}€ </div>`;
    
  }
}

//funktion damit der Slider sich beim eingeben vom input field bewegt
function updateUser(val, inputtype) {
  if (inputtype == 'Appuserrangecolor') {
    document.getElementById('AppInput').value = val;
  }
  if (inputtype == 'AppInput') {
    document.getElementById('Appuserrangecolor').value = val;
  }
  if (inputtype == 'Backendrangecolor') {
    document.getElementById('BackendInput').value = val;
  }
  if (inputtype == 'BackendInput') {
    document.getElementById('Backendrangecolor').value = val;
  }
  calcSum();
}

//Calculates the percentage of the currentval with the base of a min and max value
function calcPercent(curval, min, max) {
  return ((curval - min) / (max - min)) * 100;
}
function updatePreisStaffelungBackend() {
  var backendtype = document.querySelector("#backendfunktion").value;
  if (backendtype == "Z"){
    printPreisstaffel(pricingbackendz, "preisstaffelbackend");
  }else if (backendtype == "ZR") {
    printPreisstaffel(pricingbackendzr, "preisstaffelbackend");
  }  
}

//Rechnung für die Anzahl von Backend und App-Benutzern
function calcSum() {
  var preisproapp = document.querySelector('.proapp');
  var backendpreissum = document.querySelector('.backendpreissum');
  var appstk = document.querySelector('.appanzahl');
  var preisprobackend = document.querySelector('.probackend');
  var jaehrlich = document.querySelector('.jaehrlichsum');
  var summetext = document.querySelector('.summe');
  var rabatt = document.querySelector('.rabattsum');
  var backendanzahl = document.querySelector(".backenduser").value;
  var appanzahl = document.querySelector(".appuser").value;
  var paymenttype = document.querySelector("#zahlrythmus").value;
  var backendtype = document.querySelector("#backendfunktion").value;

  
  if (backendtype == "ZR") {
    backendpreis = getPrice(pricingbackendzr, percent, backendanzahl);
  } else {
    backendpreis = getPrice(pricingbackendz, percent, backendanzahl);
  }
  

  if (paymenttype == "M") {
    percent = 1.2; //standardvalue for monthly
  }

  

  apppreis = getPrice(pricingapp, percent, appanzahl);

  

  //Rechnungen für gesamtsumme
  var mytext = (((backendanzahl * backendpreis    appanzahl * apppreis) * 1)).toFixed(2);
  summetext.textContent = mytext   "€";
  //Rechnung für Backendpreissumme
  var backendpreissumme = (backendanzahl * backendpreis).toFixed(2);
  backendpreissum.textContent = backendpreissumme   "€";
  //Rechnung für Apppreissumme
  var apppreissumme = (appanzahl * apppreis).toFixed(2);
  appstk.textContent = apppreissumme   "€";
  //Rechnung für Preis pro Backendbenutzer
  var probackend2 = ((backendpreis * backendanzahl) / (backendanzahl)).toFixed(2);
  preisprobackend.textContent = probackend2;
  //Rechnung für Preis pro App-Benutzer
  var proapp2 = appanzahl > 0 ? ((apppreis * appanzahl) / (appanzahl)).toFixed(2) : apppreis.toFixed(2);
  preisproapp.textContent = proapp2;
  //If Abfrage wenn "Jaehrlich" ausgewaehlt wird
  if (paymenttype == "J") {
    var jaehrlicherrabatt = ((backendanzahl * backendpreis    appanzahl * apppreis) * 12).toFixed(2);
    jaehrlich.textContent = jaehrlicherrabatt   "€";
  }
  //Rechnung für Ersparnis
  var rabattsum = (jaehrlicherrabatt * 0.2).toFixed(2);
  rabatt.textContent = "-"   rabattsum   "€";

  
}


//Rechnung für Jaehrlich und Monatlich(10% Rabatt für Jaehrlich)
function checkHide(element) {
  var hidden = document.getElementById('hiddenMonthly');
  if (element && hidden) {
    element.value === 'M' ? (hidden.style.visibility = 'hidden') : (hidden.style.visibility = 'unset')
  }
}

function getPrice(pricemodels, percent, amount) {
  for (var key in pricemodels) {
    //If key is higher than the selected amount, return the value
    if (parseInt(key) >= parseInt(amount)) {
      return pricemodels[key] * percent;
    }
  }
}

html, body {
  background-color: rgb(255, 255, 255);
  height: 100%;
  margin: 0;
}

header{
  text-align: center;
  font-size: 20px;
}

body, table, select {
  font-size: 12px;
}
  

input[type=range]{
  border-radius: 32px;
  height: 10px;
  cursor: pointer;
}

*, *::before, *::after {
  box-sizing: border-box;
}

.grid-container {
    display: grid;
  grid-template-columns:600px 250px ;
  grid-auto-rows: minmax(150px, auto);
  justify-items: stretch;
  align-items: stretch;
}
.grid-item-1 {
  align-self: start;
  justify-self: center;
}


/* Background Styles Only */

/*@import url('https://fonts.googleapis.com/css?family=Raleway');*/



.text-grey{
  color:grey;
}


.grid-container {
  padding: 60px;
  width: 100%;
  grid-template-columns: 250px 200px;
}

#Backendrangecolor, #Appuserrangecolor, #BackendInput, #AppInput {
  --background: rgb(96,125,139,0.33);
  --slider: rgb(17, 166, 7);
  background: var(--background);
  -webkit-appearance: none;
  width: 150px;
}

.grid-item {
  padding: 20px;
  padding-top: 15px;
  background-color: #f8f8f8;
  color: #222;
  border: 7px solid rgba(96,125,139,0.33);
}

.grid-item:nth-child(odd) {
  background-color: #f8f8f8;
}

.target { 
  display: none; 
}
/* Base styling*/
body {
  background-color: lightgrey;
  max-width: 768px;
  margin: 0 auto;
  padding: 1em 0;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}


a {
  text-decoration: none;
}

.popover__title {
  font-size: 24px;
  color: rgb(73, 228, 68);

}

.popover__wrapper {
  position: relative;
  display: inline-block;
}
.popover__content {
  line-height: 15px;
  opacity: 0;
  visibility: hidden;
  position: absolute;
  left: -80px;
  transform: translate(0, 10px);
  background-color: #f8f8f8;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
  width: 170px;
  border-color: rgba(96,125,139,0.33);
  border-width: 4px;
  border-style: solid;
  
}
.popover__content:before {
  position: absolute;
  top: -8px;
  border-style: solid;
  border-width: 0 10px 10px 10px;
  border-color: transparent transparent #f8f8f8 transparent;
  transition-duration: 0.3s;
  transition-property: transform;
}
.popover__wrapper:hover .popover__content {
  z-index: 10;
  opacity: 1;
  visibility: visible;
  transition: all 0.5s cubic-bezier(0.75, -0.02, 0.2, 0.97);
}
.popover__message {
  text-align: center;
  
}

<html>
  <head>
    <link rel="stylesheet" href="styles.css">
    <script src="./app.js"></script>

    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  </head>
  <body>
    <div  >
      <div style="width: 270px">
        <header>Preiskalkulator</header>
        <div >
          App-Benutzer: <br>
          <input id="Appuserrangecolor" value="0" type="range" rangecolorid="Appuserrangecolor" min="0" max="100" oninput="updateUser(this.value, 'Appuserrangecolor');" class='appuser updatecolor'></input>
          <input class='updatecolor' style="width: 30px;border-color: var(--form_border_color);" type="text" id="AppInput" value="0" placeholder="1-100" rangecolorid="Appuserrangecolor" min="0" max="100" oninput="this.value = this.value > 100 ? 100 : Math.abs(this.value); updateUser(this.value, 'AppInput');"><br>
          Bürosoftware-Benutzer: <br>
          <input id="Backendrangecolor" value="1" type="range" rangecolorid="Backendrangecolor" min="1" max="15" oninput="updateUser(this.value, 'Backendrangecolor'); " class='backenduser updatecolor'></input>
          <input class='updatecolor' style="width: 30px;border-color: var(--form_border_color);" type="text" id="BackendInput" rangecolorid="Backendrangecolor" value="1" min="1" max="15" placeholder="1-15" oninput="this.value = this.value > 15 ? 15 : Math.abs(this.value,); updateUser(this.value, 'BackendInput');"><br>
        </div>
        <b > Bürosoftware wählen </b>
        <select style="width: 150px;background-color:rgba(96,125,139,0.33)" id = "backendfunktion" onchange = "calcSum();updatePreisStaffelungBackend()" >
          <option value="Z">Zeiterfassung</option>
          <option value="ZR"> Zeiterfassung   Rechnungswesen</option>
        </select>
        <select style="width: 150px;background-color:rgba(96,125,139,0.33)" id = "zahlrythmus" onchange = "calcSum();checkHide(this)" >
          <option onclick="('hidden')" value="J">Jährlich</option>
          <option value="M">monatlich</option>
        </select>
      </div>
      <div  style="width: 270px">
        <table style="width:100%;text-align: right;">
          <tr>
            <td style="width: 170px" >App-Benutzer
              <div >
                <div  style="font-size:10px;padding:0px;text-align: left;">Info</div>
                <div >
                  <p  style="font-size:12px;">Preisstaffelung-App</p>
                  <div id='preisstaffelapp' style="font-size: 10px !important; font: 10px !important;text-align: center;padding-bottom: 10px;">
                  </div>
                </div>
              </div>
              <div class='text-grey' style='display: inline-block'>pro <span  >7.50</span>€</div></td>
            <td style="width: 62px; vertical-align: top;" class='appanzahl'>0.00€</td>
          </tr>
          <tr>
            <td>Bürosoftware-Benutzer
              <div >
                <div  style="font-size:10px;padding:0px;text-align: left;">Info</div>
                <div  style="  display: inline-block;">
                  <p  style="font-size:12px;">Preisstaffelung-Büro</p>
                  <div id='preisstaffelbackend' style="font-size: 10px !important; font: 10px !important;text-align: right;padding-bottom: 10px;">
                  </div>
                </div>
              </div>
              
              <div class='text-grey' style='display: inline-block'>pro <span class='probackend'>20.00</span>€</div></td>
            <td class='backendpreissum' style="vertical-align: top;">20.00€</td>
          </tr>
          <tr><td colspan="2"><hr></td></tr>
          <tr>
            <td >Gesamtpreis mtl.:<br><div class='text-grey'>(zzgl. MwSt)</div></td>
            <td class='summe' style="vertical-align: top;">20.00€</td>
          </tr>
          <table id="hiddenMonthly" style="width:100%;text-align: right;">
            <tr>
              <td>Jährlich<br></td>
              <td class='jaehrlichsum' >240.00€</td>
            </tr>
            <tr class='text-grey'>
              <td>(inkl.20%)Rabatt<br></td>
              <td class='rabattsum'>0.00€</td>
            </tr>
          </table>
        </table>
        <a target="blank" href="https://solutions.stressfrei.de/">Anfrage</a>
      </div>
    </div>
  </body>
</html>

CodePudding user response：

Here is a flex solution with a fixed prompt

Note I changed -80 to 80 to have just the popup code

html,
body {
  background-color: rgb(255, 255, 255);
  height: 100%;
  margin: 0;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

.grid-container {
  display: grid;
  grid-template-columns: 600px 250px;
  grid-auto-rows: minmax(150px, auto);
  justify-items: stretch;
  align-items: stretch;
}

.grid-item-1 {
  align-self: start;
  justify-self: center;
}

.text-grey {
  color: grey;
}

.grid-container {
  padding: 60px;
  width: 100%;
  grid-template-columns: 250px 200px;
}

#Backendrangecolor,
#Appuserrangecolor,
#BackendInput,
#AppInput {
  --background: rgb(96, 125, 139, 0.33);
  --slider: rgb(17, 166, 7);
  background: var(--background);
  -webkit-appearance: none;
  width: 150px;
}

.grid-item {
  padding: 20px;
  padding-top: 15px;
  background-color: #f8f8f8;
  color: #222;
  border: 7px solid rgba(96, 125, 139, 0.33);
}

.grid-item:nth-child(odd) {
  background-color: #f8f8f8;
}

.target {
  display: none;
}


/* Base styling*/

body {
  background-color: lightgrey;
  max-width: 768px;
  margin: 0 auto;
  padding: 1em 0;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

a {
  text-decoration: none;
}

.popover__title {
  font-size: 24px;
  color: rgb(73, 228, 68);
}

.popover__wrapper {
  position: relative;
  display: inline-block;
}

.popover__content {
  line-height: 15px;
  opacity: 0;
  visibility: hidden;
  position: absolute;
  left: 80px;
  transform: translate(0, 10px);
  background-color: #f8f8f8;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
  width: 170px;
  border-color: rgba(96, 125, 139, 0.33);
  border-width: 4px;
  border-style: solid;
}

.popover__content:before {
  position: absolute;
  top: -8px;
  border-style: solid;
  border-width: 0 10px 10px 10px;
  border-color: transparent transparent #f8f8f8 transparent;
  transition-duration: 0.3s;
  transition-property: transform;
}

.popover__wrapper:hover .popover__content {
  z-index: 10;
  opacity: 1;
  visibility: visible;
  transition: all 0.5s cubic-bezier(0.75, -0.02, 0.2, 0.97);
}

.popover__message {
  text-align: center;
}

#preisstaffelapp {
  display: flex;
  justify-content: center;
  flex-direction: row;
  flex-wrap: wrap;
  font-size: 10px !important;
  font: 10px !important;
  text-align: center;
  padding-bottom: 10px;
}

#preisstaffelapp .ben {
  flex: 0 0 100px;
}

<div >
  <div  style="font-size:10px;padding:0px;text-align: left;">Info</div>
  <div >
    <p  style="font-size:12px;">Preisstaffelung-App</p>
    <div id="preisstaffelapp">
      <div >Bis 10 Benutzer</div>
      <div> : 7.50€ </div>
      <div >Bis 25 Benutzer</div>
      <div> : 7.00€ </div>
      <div >Bis 50 Benutzer</div>
      <div> : 6.50€ </div>
      <div >Bis 75 Benutzer</div>
      <div> : 6.00€ </div>
      <div >Bis 500 Benutzer</div>
      <div> : 5.50€ </div>
    </div>
  </div>
</div>