Change Element Height as compared to Width in HTML/CSS

Question

The width of the element changes as I type text between its tags. My question that I want some kind of relation of Width with Height. As the width gets longer, the height increases by the same but I don't want the height to exceed 35px nor start with below 5px.

The code I tried:

HTML:

<div class="btn bg-red">This buttons width expands as I write more and more text.</div>

CSS:

.btn {
  padding-left: 10px;
  padding-right: 10px;
  display: inline-block !important;
  border-radius: 6px;
  color: #ffffff;
  padding-top: 10px;
  padding-bottom: 10px;
  height: relative;
}
.bg-red{background-color:#F55C58;}
.bg-red:hover{background-color:#F44946}

I'm not sure if it is possible in CSS to do this.

Then I tried this:

HTML:

<div class="btn bg-red"><div class="auto">This buttons width expands as I write more and more text.</div></div>

CSS:

.btn {
  padding-left: 10px;
  padding-right: 10px;
  display: inline-block !important;
  border-radius: 6px;
  color: #ffffff;
  padding-top: 10px;
  padding-bottom: 10px;
}
.auto {
  height: 20%
}
.bg-red{background-color:#F55C58;}
.bg-red:hover{background-color:#F44946}

Javascript:

var cw = $('.auto').width();
$('.auto').css({'height':cw+'px'});

The second code doesn't seem to follow display:inline. It works when you change the code manually.

Find demo for First code here.

Find demo for Second code here.

Edit:

Understood Meaning: When the button/element has less text, the width is small and the same way, the height should act same but 20% less pixels. When the text is increased, the width increases and the height should also increase. The max length of Height can reach up to 35px but the Width is Infinite by default.

Answer 1

I don't know how do you add text on your div. Anyway, on the following snippets the eventlistener trigger is set to input since it's a contenteditable div (the text is added by the user throught keyboard).

Snippet #1:

document.getElementsByTagName("body")[0].onload=function(){equalize()};

var target = document.getElementById("target");

target.addEventListener("input", equalize);

function equalize() {  
var x = target.offsetWidth;
target.style.height = x + "px";
}

#target {
  display: inline-block;
  background: skyblue;  
}

<div id=target contenteditable="true">write here</div>

This second snippet is the same as the previous one, but now the height is 20% smaller than the width (it was equal on the previous example) plus have a max-height limit of 100px.

Snippet #2:

var target = document.getElementById("target");

document.getElementsByTagName("body")[0].onload=function(){equalize()};
target.addEventListener("input", equalize);

function equalize() {  
var x = target.offsetWidth;
var reducedpart = x / 100 * 20;
var result =  x - reducedpart;

  if (result > 100) {
    var result = 100;    
}  
  
target.style.height = result + "px";
}

#target {
  display: inline-block;
  background: skyblue; 
}

<div id=target contenteditable="true">write here</div>

Same as before but using padding instead of height to let the text on center:

Snippet #3:

var target = document.getElementById("target");

document.getElementsByTagName("body")[0].onload=function(){equalize()};
target.addEventListener("input", equalize);

function equalize() {  
var x = target.offsetWidth;
var reducedpart = x / 100 * 20;
var result =  x - reducedpart;

  if (result > 100) {
    var result = 100;    
}  

var secresult = result / 2;

target.style.paddingTop = secresult + "px";
target.style.paddingBottom = secresult + "px";
}

#target {
  display: inline-block;
  background: skyblue; 
  padding-left: 15px;
  padding-right: 15px;
}

<div id=target contenteditable="true">write here</div>

CSS-only workaround using padding instead of height:

Snippet #4:

.container {  
  vertical-align: bottom;
  display: inline-block;
}

#a {
  width: 100%;
  padding-bottom: calc(80% - 1em);
  background: gold;
}

#b {
  width: 100%;
  padding-top: calc(40% - 0.5em);
  padding-bottom: calc(40% - 0.5em);
  background: tomato;
}

<div class=container><div id=a contenteditable="true">write here</div></div>
<div class=container><div id=b contenteditable="true">write here</div></div>

Answer 2

In jquery there's a function .height() that get the current computed height for the html element in the given ID or Class. Getting the height value of your div.auto you can monitor the height increase. Given that, you can make a condition if ($('.auto').height() <= 35px) that limit it up to 35px .

Put this <script type="text/javascript" src="jquery-1.12.2.js"></script> in your <head> and that you have the latest JQuery library.

Here's the full implementation of code. Try it in your localhost, because sometimes it doesn't work on jsfiddle or likewise.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style media="screen">
      .btn {
        padding-left: 10px;
        padding-right: 10px;
        display: inline-block !important;
        border-radius: 6px;
        color: #ffffff;
        padding-top: 10px;
        padding-bottom: 10px;
      }
      .auto {
        height: 20%
      }
      .bg-red{background-color:#F55C58;}
      .bg-red:hover{background-color:#F44946}
    </style>
    <script type="text/javascript" src="jquery-1.12.2.js"></script>
  </head>
  <body>
    <div class="btn bg-red"><div class="auto">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div></div>
    <script type="text/javascript">
    var cw = $('.auto').width();
    if ($('.auto').height() <= 35px) {
      $('.auto').css({'height':cw+'px'});
    }
    </script>
  </body>
</html>

Hope this will help