Advertisement
Guest User

Untitled

a guest
Feb 24th, 2019
80
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 0.79 KB | None | 0 0
  1. <div>
  2. <span>some dynamic text</span>
  3. <input type="text" />
  4. </div>
  5.  
  6. <div class = "container">
  7. <div class = "text">Glee is awesome!</div>
  8. <div class = "inputtext"><input type="text" /></div>
  9. </div>
  10.  
  11. .container {
  12. display: table;
  13. width: 100%; /*how much should both the text and the input take*/
  14. }
  15. .container .text {
  16. white-space: nowrap;
  17. display: table-cell;
  18. width: 1px; /*make sure it's only as wide as needed*/
  19. }
  20. .container .inputtext {
  21. display: table-cell;
  22. }
  23. .container input {
  24. width: 100%; /*let the input take all available space*/
  25. }
  26.  
  27. <div class = "text">Glee is awesome!</div>
  28. <div class = "inputtext"><input type = "text" /></div>
  29.  
  30. .text {
  31. float: left;
  32. }
  33. .inputtext {
  34. overflow: hidden; /*this is the key here*/
  35. }
  36. input {
  37. width: 100%;
  38. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement